Remove navbar from container

[TheoLechemia]

Hello,

Currently the navbar is inside the bootstrap "container" class. Without "container-fluid" the navbar only take the half of the screen and with "container-fluid" there is padding on his side : see screenshots
Without fluid :

with fluid :

My proposition remove the navbar from the container in order to take always the full width of the screen :

Done for bootstrap 2, 3 and 4

BTW: thanks for the great job you do on this package ;)

[Leonwenbin]

Actually you can do this by setting FLASK_ADMIN_FLUID_LAYOUT = True for "container-fluid"

[TheoLechemia]

Yes I already use FLASK_ADMIN_FLUID_LAYOUT. The thing the PR fix, il the innapropriate padding on the navbar sides with FLASK_ADMIN_FLUID_LAYOUT.
The navbar should not be in the container according to bootstrap practices

[TheoLechemia]

[TheoLechemia]

Is it possible to merge this little PR ?

[hasansezertasan]

Is it possible to merge this little PR ?

The repository has been inactive for over 8 months now.

[TheoLechemia]

Yes, saw that !
Are you a maintener ?

[hasansezertasan]

Yes, saw that !
Are you a maintener ?

Sadly nope, I'm working on my own fork.

[samuelhwilliams]

Hi 👋

I'm happy with the change this makes in the container-fluid state, but I'm not really convinced that in the default state it's better for the navbar to still be full width. I think I'd still prefer the navbar content (links/etc) to be restricted to the width of the main layout.

I would be more OK with a solution that extends the navbar visually to the full width, but keeps the links/etc centered within the standard restricted width. So basically - just making the navbar background colour the full width, and not changing the link positioning.

I'm open to some discussion on this though, especially anything around "best practice"/accessibility.

[TheoLechemia]

Hi !
Thank's for your response !

It appears to me to be a common pattern (full width navbar even with redictricted content width).
OK to discuss about it ;)

[TheoLechemia]

A little "benchmark" on some popular websites :

• Navbar looks like to be almost always full width (and actions / links in the corners) :

• but sometimes links / actions are more centered :

[hasansezertasan]

Check out the examples from Bootstrap4.

There are different layout examples for the navbar; two are in the container div.

I don't see a huge problem with the current application.

WTYT about this @samuelhwilliams, @TheoLechemia?

[samuelhwilliams]

I like the proposed change when in container-fluid mode (removing the excess margin/padding); I don't totally agree with the change in the default mode though. I'm OK with the navbar background being full width in default mode, but I'd prefer the content (text, links, dropdowns etc) to remain centered.

Other than the margin/padding in container-fluid mode, this all feels a bit like personal preference though.

[hasansezertasan]

I like the proposed change when in container-fluid mode (removing the excess margin/padding); I don't totally agree with the change in the default mode though. I'm OK with the navbar background being full width in default mode, but I'd prefer the content (text, links, dropdowns etc) to remain centered.

Other than the margin/padding in container-fluid mode, this all feels a bit like personal preference though.

It really feels like a personal preference that can be overridden easily. A "How to" documentation on this topic could be beneficial.