[BUG] Layout Boxed is broken for fixed navbar/footer

[dfsmania]

Describe the bug The boxed layout has a lot of visual issues when combined with fixed navbar or footer. Also the slide animation for the right sidebar is wrong. I'm not really sure if this layout is useful for something, but as maintainer of the Laravel/AdminLTE package I'm thinking of dropping the possibility to enable it.

To Reproduce Steps to reproduce the behavior:

1. Go to https://adminlte.io/themes/v3/pages/layout/boxed.html
2. Open right (control) sidebar and checkout the slide animation (FIRST ISSUE).
3. Open right (control) sidebar and enable fixed navbar (SECOND ISSUE).
4. Open right (control) sidebar and enable fixed footer (THIRD ISSUE).

Expected behavior It should works nicely with fixed navbar or footer.

Screenshots

Here you can see how it looks with fixed navbar and footer.

Environment (please complete the following information):

• AdminLTE Version: [e.g. v3.1.0]
• Operating System: Not relevant
• Browser (Version): Not relevant

[danny007in]

Open right (control) sidebar and checkout the slide animation (FIRST ISSUE). Open right (control) sidebar and enable fixed navbar (SECOND ISSUE). Open right (control) sidebar and enable fixed footer (THIRD ISSUE).

with image 👍🏼 we can solve issue faster

[dfsmania]

@danny007in The above image already shows issues 2 and 3. For the first issue I will need to capture a video, do you have any recommendation tool?

[danny007in]

@danny007in The above image already shows issues 2 and 3. For the first issue I will need to capture a video, do you have any recommendation tool?

it may help u https://github.com/ColorlibHQ/AdminLTE/issues/3558#issuecomment-812770054

[danny007in]

in sharex u can record screen

[REJack]

Fixed header & footer will not work for boxed layout, position: fixed; is only relative to the window not to any other parent. Control-Sidebar slide bug is fixed with 92ccf78.

[dfsmania]

@REJack what if you add the next style that is already applied to .wrapper, but to the elements .main-header and .main-footer. I have give it a fast try and it looks a bit better on the boxed layout.

.layout-boxed .wrapper, .layout-boxed .wrapper::before {
    margin: 0 auto;
    max-width: 1250px;
}

However, it is just a starting point, since you need to make some adjustments to make toggle button visible, maybe with extra padding on left and take care of the situations where the sidebar is collapse and/or the mini mode... for example...

/* When sidebar is expanded */
.layout-boxed.layout-navbar-fixed .main-header {
    margin: 0 auto !important;
    max-width: 1250px;
    padding-left: 260px;
}

/* When sidebar is collapsed into mini mode */
.layout-boxed.layout-navbar-fixed.sidebar-collapse.sidebar-mini .main-header {
    padding-left: 4.6rem;
}

/* When sidebar is fully collapsed set padding-left to 0 */
...

That is just and idea, since there will be a lot of other situations not considered...

[danny007in]

is this issue resolved

[dfsmania]

@danny007in I don't think it is fully addressed, unless you want to specify that fixed navbar and/or footer is not compatible with the boxed layout. I believe it can be possible to make it compatible, but won't be easy since you need to take care of a lots of situations...

[danny007in]

@danny007in I don't think it is fully addressed, unless you want to specify that fixed navbar and/or footer is not compatible with the boxed layout. I believe it can be possible to make it compatible, but won't be easy since you need to take care of a lots of situations...

@REJack Add in Docs about boxed issue

[REJack]

Add in Docs about boxed issue

there is already a note in the docs 😄

We will look while the v4 development to get this working.