Adminlte: Collapsed SideBar Layout bugs on mobile device

[dwiprawira1989]

if you open this : https://adminlte.io/themes/AdminLTE/pages/layout/collapsed-sidebar.html on mobile phone, when user show the side bar for the firstime and select menu, there is a layout issue. But after you hide and show again the sidebar, it works fine

[bellwood]

What mobile platform and browser?

Could you provide a screenshot?

[dwiprawira1989]

I am using One Plus 3 with android oreo with google chrome browser.

Screenshot:

[bellwood]

Can't reproduce on IOS Chrome or Safari.

Oddly, my hamburger menu background inherits the darker blue background from the brand header, where as yours does not.

Anyone else able to reproduce?

[dwiprawira1989]

It only happen when we add sidebar-collapse class to the body. I can reproduce it on google chrome and firefox on my windows.

[dwiprawira1989]

So, i know why this is happened. When it open with sidebar-collapse on the smaller device, when the toggle button clicked for the first time, the body class become : sidebar-mini sidebar-collapse sidebar-open. As you can see, the body class has sidebar-collapse and sidebar-open together.
So i fixed it with a little jquery script :

$(document).on('click', '.sidebar-toggle', function () {
    if ($('body').hasClass("sidebar-collapse") && $('body').hasClass("sidebar-open")) {
       $('body').removeClass("sidebar-collapse");
    }
});

[MohammadDayeh]

@bellwood You might not notice that on a mobile device because this happens on hover. You can reproduce that on chrome if you resize the window to a mobile screen width.

[raonyguimaraes]

Thanks a lot I was having the exactly same problem. The jquery code indeed fixed it. :D

[bcelik]

Just change
`
PushMenu.prototype.open = function () {
var windowWidth = $(window).width();

if (windowWidth > this.options.collapseScreenSize) {
  $('body').removeClass(ClassName.collapsed)
    .trigger($.Event(Event.expanded));
}
else {
    $('body').addClass(ClassName.open)
    .trigger($.Event(Event.expanded));
}

}; to
PushMenu.prototype.open = function () {
var windowWidth = $(window).width();

if (windowWidth > this.options.collapseScreenSize) {
  $('body').removeClass(ClassName.collapsed)
    .trigger($.Event(Event.expanded));
}
else {
    $('body').removeClass(ClassName.collapsed).addClass(ClassName.open)
    .trigger($.Event(Event.expanded));
}

};`
in adminlte.js. Remove sidebar-collapse class before adding sidebar-open class

[schmunk42]

A fix for me was always either to add sidebar-open (which I had missing) or sidebar-collapse, in my case depending on a Cookie state.

Didn't work out :(

[majesticmaiden]

Thanks a lot to @dwiprawira1989 your code works!

[herryswastika]

Thanks a lot too to @dwiprawira1989 ; i just implement this.

[ekaprasetya]

Thanks a lot @dwiprawira1989 your code works!!

[skjerk]

Thanks @dwiprawira1989 - Had this problem and a quick search lead me to your solution :-)

[AMIRUDIN5592]

i have a solution for this issue,

add this code to your body style.

and controller
public function __construct() {
parent::__construct();
$this->load->library('user_agent');
}
function _set_useragent(){
if ($this->agent->is_mobile('iphone'))
{
$this->agent= 'iphone';
}
elseif ($this->agent->is_mobile())
{
$this->agent= 'mobile';
}
else
{
$this->agent= 'desktop';
}
}

[IbneKayesh]

Just change
`
PushMenu.prototype.open = function () {
var windowWidth = $(window).width();

if (windowWidth > this.options.collapseScreenSize) {
  $('body').removeClass(ClassName.collapsed)
    .trigger($.Event(Event.expanded));
}
else {
    $('body').addClass(ClassName.open)
    .trigger($.Event(Event.expanded));
}

};to
PushMenu.prototype.open = function () {
var windowWidth = $(window).width();

if (windowWidth > this.options.collapseScreenSize) {
  $('body').removeClass(ClassName.collapsed)
    .trigger($.Event(Event.expanded));
}
else {
    $('body').removeClass(ClassName.collapsed).addClass(ClassName.open)
    .trigger($.Event(Event.expanded));
}

};`
in adminlte.js. Remove sidebar-collapse class before adding sidebar-open class

Problem solved,Many Many Thanks :)