SearchBar Mobile fix.

+ disabling custom scrollbars on mobile

src/app/core/components/search-bar/search-bar.component.scss

@@ -5,7 +5,9 @@
     .fuse-search-bar {
         height: 64px;
         font-size: 13px;
-
+        @include media-breakpoint-down('xs') {
+            height: 56px;
+        }
         .fuse-search-bar-expander,
         .fuse-search-bar-collapser {
             cursor: pointer;
@@ -14,12 +16,20 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
+            @include media-breakpoint-down('xs') {
+                height: 56px !important;
+                line-height: 56px !important;
+            }
         }
 
         .fuse-search-bar-loader {
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
+            @include media-breakpoint-down('xs') {
+                height: 56px !important;
+                line-height: 56px !important;
+            }
         }
 
         .fuse-search-bar-collapser {

src/app/core/services/config.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { NavigationStart, Router } from '@angular/router';
+import { Platform } from '@angular/cdk';
 
 @Injectable()
 export class FuseConfigService
@@ -12,7 +13,10 @@ export class FuseConfigService
     /**
      * @param router
      */
-    constructor(private router: Router)
+    constructor(
+        private router: Router,
+        public platform: Platform
+    )
     {
         // Set the default settings
         this.defaultSettings = {
@@ -21,13 +25,22 @@ export class FuseConfigService
                 toolbar   : 'below', // 'above', 'below', none
                 footer    : 'none' // 'above', 'below', none
             },
-            colorClasses: {
+            colorClasses    : {
                 toolbar: 'md-white-500-bg',
                 navbar : 'md-fuse-dark-500-bg',
                 footer : 'md-fuse-dark-800-bg'
-            }
+            },
+            customScrollbars: true
         };
 
+        /**
+         * Disable Custom Scrollbars if Browser is Mobile
+         */
+        if ( this.platform.ANDROID || this.platform.IOS )
+        {
+            this.defaultSettings.customScrollbars = false;
+        }
+
         this.settings = Object.assign({}, this.defaultSettings);
 
         // Reload the default settings on every navigation start

src/app/main/main.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../core/services/config.service';
 
@@ -12,6 +12,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
 {
     onSettingsChanged: Subscription;
     fuseSettings: any;
+    @HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars;
 
     constructor(
         private _renderer: Renderer2,
@@ -24,6 +25,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
+                        this.disableCustomScrollbars = !this.fuseSettings.customScrollbars;
                     }
                 );
     }