Welcome to WebmasterWorld Guest from 3.81.28.94

Forum Moderators: open

Message Too Old, No Replies

bootstrap navbar resize problem with navbar-fixed-top

bootstrap menu size doubles instead of adding to dropdown

     
6:40 pm on Jul 18, 2015 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


There's a bug in Twitter Bootstrap using navbar-fixed-top where resizing the page causes anything on the right hand side of the menu to eventually find a screen size position where it's not properly calculated and the menu expands to two lines of text, overlapping and obscuring the lines below, and it overwrites our line there the inbox is displayed.

This problem isn't unique to WebmasterWorld, it even happens on the main bootstrap site itself as you step up and down resizing the browser viewport.

I've tried several solutions I found in various places including one in javascript that detects the resize and supposedly moves the container div based on the currently size of the navbar, it didn't work, it appears to have been for Bootstrap 2 only.

The only solution I've found to this annoying problem is to switch back to a static navbar that's not positioned on the top of the screen at all times which loses a lot of ease of use and functionality.

Like I said, I've looked far and wide and tried a bunch of solutions offered, nothing worked.

Anyone got a solution to this?

Or do we just have to wait for Bootstrap to fix this issue assuming they even know there's a bug in the first place!
9:07 pm on July 18, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10125
votes: 1007


Many of these "features" require the browser to "refresh" (rewrite) the screen with every change in position (up/down, nav, etc) and that will create a new layou each time. To do what you're asking is seeking a method to stop that....

At least that has been my struggle with JS, ajax, bootstrap, etc. (Yes, I''m the NoScript Luddite, but that does not mean I don't code what client ask for!).

Historically, the only thing that as actually done what most of us want is frameset (the really old version!)

Today's responsive and fluid designs are not exactly that precise and will rewrite te screen with each action instead of just a segment of the screen.

I don't have an answer. I still keep looking, but haven't found one that is consistent, yet.
5:44 pm on July 19, 2015 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


The problem with the bootstrap navbar-fixed-top is the following:

1) there are edge conditions where instead of putting items on the drop down menu, it causes a wrap and we get 2 lines instead of it staying just 1 line

2) the javascript that displays the navbar in this case overwrites the container below it without moving the container

So what's needed is to:
a) stop the 2-line navbar, or
b) move the contain below the size of the navbar

Like I said in the OP, someone had a patch they claimed worked in BS2 but it failed in BS3.

Seems like a simple thing if you can get the size of that menu object to just change the default offset which would move the main container down but it didn't work. I'm hoping if I can't find a fix that they've solved it in BS4 which is supposedly coming soon. I guess if I had time to dig through their code that I could get the boostrap source files and fix the stupid navbar resizing issue because it should know when it's wrapped to a second line and either remove items until it's a single line again or just push the page down.

Sure doesn't sound like rocket science, just a simple UI bug in the computations of how much fits on a lousy line.

I really don't want to end up being a Bootstrap contributor just to fix the damn bug, I'd like a simpler solution in jQuery like the ones I saw that no longer work. LOL
2:06 pm on July 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Let me preface this by saying that I'm not entirely sure I understand what you are describing, so if this isn't what you mean then forgive me. With that said...

The Bootstrap media query breakpoints are at 768px, 992px, and 1200px:
-xs: <768px
-sm: >= 768px
-md: >= 992px
-lg: >= 1200px

I notice that if I set me viewport width to be between 992px and 1064px or 1200px and 1388px , then the "Search WebmasterWorld" box gets pushed to the next line. I think this is what you're describing. However, the problem doesn't appear to be something wrong with Bootstrap, but rather that you simply have too many visible list items in the nav for the specified media query width.

What I would suggest is that you get a browser extension that lets you specify the viewport width (I like Window Resizer for Chrome). Set the width to each of the breakpoint values. And then remove items (using the hidden/visible classes) until it displays as you want it.
1:57 pm on July 28, 2015 (gmt 0)

Full Member from GB 

10+ Year Member

joined:Oct 16, 2001
posts: 207
votes: 0


You could over-ride it with a bit of flexbox magic to get it to fit. Support is pretty good [caniuse.com...]

Let me know if you want me to have a look at it.