[BUG] Sidebar not work in small screen when using sidebar_collapse_auto_size option

[BayuZangetsu]

Question	Answer
Issue or Enhancement	Sidebar not show when entering small screen
Laravel Version	Laravel 8

Current Behavior

it happen when I using browser developer tools to change the device size, and sidebar can't show properly, it only show little shadow in the edge of screen

Expected Behavior

sidebar show normaly

Steps to Reproduce

look at picture above, its only show little black shadow, not showing the sidebar and then when in ipad screen size, sidebar can show (click the show/hide sidebar button) but after it show, the button is missing and sidebar cannot enter hide mode. look at this picture below

[dfsmania]

@BayuZangetsu Please share all the LAYOUT and SIDEBAR configuration parameters of the adminlte.php file. Also, what version of the package are you using?

[BayuZangetsu]

@BayuZangetsu Please share all the LAYOUT and SIDEBAR configuration parameters of the adminlte.php file. Also, what version of the package are you using?

i haven't changed anything except title, everything is still original on adminlte.php config file. this is my view and its extend from adminlte::page. and page.blade.php still original

adminlte.php.txt index.blade.php.txt

i use laravel-adminlte V.3.5.3 fresh install from composer

[dfsmania]

@BayuZangetsu The default set of values for sidebar configuration is:

/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
|
| Here we can modify the sidebar of the admin panel.
|
| For detailed instructions you can look the sidebar section here:
| https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Layout-and-Styling-Configuration
|
*/

'sidebar_mini' => true,
'sidebar_collapse' => false,
'sidebar_collapse_auto_size' => false,
'sidebar_collapse_remember' => false,
'sidebar_collapse_remember_no_transition' => true,
'sidebar_scrollbar_theme' => 'os-theme-light',
'sidebar_scrollbar_auto_hide' => 'l',
'sidebar_nav_accordion' => true,
'sidebar_nav_animation_speed' => 300,

Instead, in your file you are using this set:

/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
|
| Here we can modify the sidebar of the admin panel.
|
| For detailed instructions you can look the sidebar section here:
| https://github.com/jeroennoten/Laravel-AdminLTE/wiki/7.-Layout-and-Styling-Configuration
|
*/

'sidebar_mini' => true,
'sidebar_collapse' => false,
'sidebar_collapse_auto_size' => true,
'sidebar_collapse_remember' => true,
'sidebar_collapse_remember_no_transition' => true,
'sidebar_scrollbar_theme' => 'os-theme-light',
'sidebar_scrollbar_auto_hide' => 'l',
'sidebar_nav_accordion' => true,
'sidebar_nav_animation_speed' => 300,

The differences are on the next options:

'sidebar_collapse_auto_size' => true,
'sidebar_collapse_remember' => true,

The option sidebar_collapse_auto_size is used to trigger the collapse of the sidebar after the configured (minimum) width is reached. So, it only accepts false to disable it, or an integer number representing the minimum width bound. However, it is not working nicely right now. So my recommendation is to disable it ('sidebar_collapse_auto_size' => false).

For the second problem:

and then when in ipad screen size, sidebar can show (click the show/hide sidebar button) but after it show, the button is missing and sidebar cannot enter hide mode...

I believe, for what I have tested, the sidebar will hide if you click outside it. When opened, a grey backdrop will show over the page. Please, confirm this!

We should leave this issue open. I will get into the sidebar_collapse_auto_size property when get some time...

[dfsmania]

@REJack Do you know if there is any rework on the incoming AdminLTE v3.1.0 related to pushmenu plugin? I have tested and there is a compatibility problem with the sidebar collapsed mode that triggers on particular bootstrap breakpoints and the pushmenu plugin that is enabled when using sidebar_collapse_auto_size property. For example, if sidebar_collapse_auto_size=600, the sidebar won't work nicely on the width range [600, 992).

When the first auto collapse mode is trigger at the LG bootstrap breakpoint, the sidebar won't collapse and the result will be like the one shown on the next image (then, you have no way to collapse the sidebar).

After this situation, if you keep lowering the width, a second auto collapse is triggered on the sidebar and you will see a shadow, but the toggle button won't open the sidebar.

Finally, when you are under 600px width, all start working nicely again.

@resslinger Can you add the adminlte-bug label to this issue?

[dfsmania]

An issue was opened on AdminLTE package in order to find a solution for this. Check the next link to follow updates: https://github.com/ColorlibHQ/AdminLTE/issues/3561