Horizontal justified nav gets ugly when text wraps #15906
Comments
|
Hi @fabiocarneiro! You appear to have posted a live example (http://jsbin.com/woveliqaga/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
|
Hi @fabiocarneiro! You appear to have posted a live example (http://jsbin.com/fabifukine/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
|
This appears to be a copy of the example which uses the With that said, does this occur with the navbar versions included in the base Bootstrap without any need for custom code? If so, then I would agree there is an issue that needs to be addressed. |
cvrebert
changed the title
|
I'm not sure. I just copied exactly same html, removed some of the buttons and increased the text size. I'm not sure if that is even possible, but it should be nice to the other buttons to follow the same height of the bigger one. |
|
I assumed it wasn't core from the "Justified navbar nav links are currently not supported." found here |
|
@kkirsche that's navbar, another component. The one i'm complaining about is "Navs". |
|
Truncate the text using one of our utility classes or don't include so much text :). |
|
@mdo, that's not a good option. in fact that nav thing only work with "one line" text buttons, anything higher than 1 line will break things. I'm not trying to use a ridiculous amount of text, but in my use case it must have two lines. |
|
@mdo At the least, that restriction should be documented, IMO. |
|
@cvrebert where in the docs would this be documented though? The justified nav pills itself doesn't "break" due to multi-line. A justified navbar styled version which is considered a custom component per the wording from the examples page breaks. As I see it, this isn't something that should be included in the main docs as it doesn't really affect the component itself, but rather an implementation of it. It could potentially though be documented in the source code of the example itself though. Thoughts? |
Document in the source code that the justified nav is meant for single line list items only. This should help prevent Issues like twbs#15906 in the future.
|
@kkirsche I already told you that this is not happening only in the custom example layout, but apparently you didn't believe. http://jsbin.com/jokejajeza/1/#nav Take a look in the "justified" section. And again i repeat, we are talking about navs here, not navbar. That's another component. I noticed you referenced this in a navbar issue. |
|
Hi @fabiocarneiro! You appear to have posted a live example (http://jsbin.com/jokejajeza/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
|
If there's too much content within something, I don't know what we could document anywhere—in the example or the main docs—other than what I suggested above. Without sounding too much like a jackass though, that feels like common sense to me given the nature of the component. The justified nav is equal-width nav links. If one of those nav link's content is far too long, it will wrap. Preventing that wrapping on the outset feels unnecessary for most use cases. |
Add source code documentation of justified navbar for #15906
|
@fabiocarneiro I apologize if you feel my intention was to ignore what you had said. I based my comment on the JSBin provided which I incorrectly assumed demonstrated the problem (when one item in nav-justified tabs or background colored pills) and it's scope (tabs and background colored pills. I didn't see a real issue with the pills themselves personally but I can understand it). With that said, the easy 'hack' fix should be to ensure all of your nav links are the same length using code such as This addresses the height issue caused by wrapping the text and ensures it is all equal throughout the component. Yes, this is not a perfect solution and yes there are still issues with how it looks, but it does fix the underlying problem of having multiple different sized nav items. I apologize though @fabiocarneiro if you felt my comments were meant to ignore other cases or that I was referring to a navbar component. In regards to my verbiage of "navbar" — I feel the original JSBin provided is a nav item which has been styled to look like a pseudo-navbar and navbar in my opinion accurately describes how it's being used in that example. The standard nav items usually use button link styles which are not solid like that. Nonetheless, didn't mean to ignore what was said, I just made an incorrect assumption based on the JSBin originally provided and what I had seen. Sorry! 😃 |
|
@kkirsche Sorry man, i didn't mean to be rude. the |
http://jsbin.com/woveliqaga/1/
The text was updated successfully, but these errors were encountered: