Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove navbar from container #2337

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

TheoLechemia
Copy link

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 :
navbar-in-container
with fluid :
navbarfluidwithcontainer

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

fluidwithoutcontainer

notfluidwithoutcontainer

Done for bootstrap 2, 3 and 4

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

@Leonwenbin
Copy link

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

@TheoLechemia
Copy link
Author

TheoLechemia commented Oct 30, 2023

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
Copy link
Author

flask_admin_padding_ta

@TheoLechemia
Copy link
Author

Is it possible to merge this little PR ?

@hasansezertasan
Copy link
Member

Is it possible to merge this little PR ?

The repository has been inactive for over 8 months now.

@TheoLechemia
Copy link
Author

Yes, saw that !
Are you a maintener ?

@hasansezertasan
Copy link
Member

Yes, saw that !
Are you a maintener ?

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

@samuelhwilliams
Copy link
Contributor

samuelhwilliams commented Jul 13, 2024

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
Copy link
Author

TheoLechemia commented Jul 15, 2024

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
Copy link
Author

TheoLechemia commented Jul 15, 2024

A little "benchmark" on some popular websites :

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

Capture d’écran du 2024-07-15 09-37-07

Capture d’écran du 2024-07-15 09-37-44

Capture d’écran du 2024-07-15 09-38-47

  • but sometimes links / actions are more centered :

Capture d’écran du 2024-07-15 09-38-10
Capture d’écran du 2024-07-15 09-38-30

@hasansezertasan
Copy link
Member

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
Copy link
Contributor

samuelhwilliams commented Jul 19, 2024

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

4 participants