Using flex to lay out a menu, all works nicely on chrome on windows:
However on ios devices (various iphones and ipads) the longer content does NOT expand its container as much as it should, and/or the smaller items don't shrink as much as they should, and the longer content gets cut off:
I'm viewing on Safari 9, which should be pretty up to date and not need prefixes (I've tried prefixes anyway - they didn't work). Am I missing something?
<style>
.lvl1Menu
{
width:750px;
display: flex;
flex-direction: row;
justify-content: space-around;
background-color:white;
padding:0;
font-size: 16px;
flex-direction: row;
}
li{
list-style: none;
text-align:center;
background-color:#EEEEEE;
padding:0px;
font-size: 25px;
flex: 1 1 auto;
}
</style>
<ul class="lvl1Menu">
<li>
Some words
</li>
<li>
Some words
</li>
<li>
ONELONGWORD
</li>
<li>
Some words
</li>
<li>
Some words
</li>
<li>
Some words
</li>
<li>
Some words
</li>
</ul>
"Chrome, Opera, and Safari do not honor the default min-content size of flex items. Set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage."
Source:
https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
I'm guessing the Chrome has fixed this since then, but Safari hasn't.
Perhaps you need to set flex-shrink:1; and possibly flex-grow:1;
https://css-tricks.com/almanac/properties/f/flex-shrink/
Related
This question already has answers here:
CSS Grid auto fit with max-content
(2 answers)
Closed last month.
Please see the snippet below. By using a big text size, you can see that it will overflow the columns in small screens. I can't get why... Shouldn't auto-fill/fit algorithms take it into account while sizing columns and make them flow on the following row?
Please note: I am not looking for font-size auto-scaling here. My problem here is grid columns are not auto sizing and auto flowing accordingly. Also, if you want to understand the issue, you must see the example on small screens.
ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: .5em;
padding: 0;
list-style: none;
}
li a {
display: block;
text-align: center;
padding: 10px;
background-color: red;
color: #fff;
text-decoration: none;
font-size: 29px;
}
<ul class="year-archives custom">
<li>
2022/23
</li>
<li>
2021/22
</li>
<li>
2020/21
</li>
<li>
2019/20
</li>
<li>
2018/19
</li>
<li>
2017/18
</li>
</ul>
If the idea is to have the word wrap if it doesn't fit, add this property-value pair to your li a selector:
overflow-wrap: break-word;
There are a lot of questions about vertical centering, the occasional flexbox-stretching oddity, or the difference between block and table elements, but I couldn't find anything about the (unexpected) behavior of this particular combination.
I'm in a bit of a tricky situation with the markup bootstrap-vue is giving me:
#navbar-container {
/* Given */
position: relative;
display: flex;
width: 100%;
}
#navbar {
/* Given */
flex-grow: 1;
display: flex;
flex-direction: row;
/* For illustration */
background-color: red;
}
.nav-item {
/* Given */
flex-grow: 1;
text-align: center;
/* Added to center .nav-link content vertically */
display: table;
/* Without this Chrome and Edge don't stretch to the height of #navbar(-container), but Firefox does */
/*height: 100%;*/
}
.nav-link {
/* Added to center content vertically */
display: table-cell;
vertical-align: middle;
/* Should cover #navbar's red background */
background-color: lightgreen;
}
<div id="navbar-container">
<div id="navbar">
<div id="brand">
<!-- Gives height to #navbar -->
<img src="https://via.placeholder.com/100">
</div>
<div class="nav-item">
<a class="nav-link">
Item 1
</a>
</div>
<div class="nav-item">
<a class="nav-link">
Item 2
</a>
</div>
<div class="nav-item">
<a class="nav-link">
Item 3
</a>
</div>
</div>
</div>
I'm trying to vertically center the content of .nav-link across the full height of #navbar.
Keep in mind that I can't change anything about the markup here, it's given to me by the framework.
Since #navbar (implicitly) has align-items: stretch, I would assume that .nav-item is stretched to the height of #navbar. Firefox agrees, but Chrome and Edge don't.
The interesting part is that this happens only with display: table elements.
Any other display value (correctly) stretches .nav-item to the height of #navbar.
Note that .nav-link doesn't automatically stretch along in that case, but that's to be expected.
Adding height: 100% to .nav-item fixes the problem, but I can't understand why this is necessary.
I'm not looking for alternative vertical-centering solutions, adding the height works fine.
Using nested flexbox or line-height poses other (architectural) issues.
I suppose at this point I'm mostly curious why this happens, and perhaps more importantly: which browser is in the wrong here?
Here you go with officlal doc.
Table elements have an internal 'table wrapper box'. This wrapper is stretched, but the actual table itself isn't stretched to that box. The table height only grows with its content, or when you specify a height.
It's unclear why, but Firefox apparently does stretch the actual table automatically.
Zurb Foundation's top-bar is extremely useful. It works great as a main navigation for a site/app, and collapses to a mobile-friendly format on smaller devices.
Its one major shortcoming is the ability to make the top-bar full-width with evenly spaced nav items. Is there a way to make the top-bar full-width and the nav items evenly spaced?
Example
If the top-bar has 6 nav items (width varying length titles) and we're using the default width of 1000px for .rows (with 15px gutters) the 6 nav items should evenly space themselves across the 970px top-bar. The first and last nav items should be left and right justified respectively.
As the screen size reduces the nav items should shrink in width to maintain their even spacing until the $topbar-breakpoint causes the top-bar to collapse to the mobile format.
Requirements
The solution should be CSS-based.
The solution should match Foundation 5's compatibility chart. Namely this means it needs to support IE9+.
Beneath the $topbar-breakpoint the top-bar should work as normal.
Here's a jsFiddle with the Foundation 5 resources already loaded.
Here is another solution. It is based on flexbox which hasn't been supported by browser for very long and it is still only a candidate recommendation: CSS Flexible Box Layout Module
jsFiddle
If you provide a good fallback, like the original Foundation CSS it can be used.
Update
You could also use this jQuery solution as a fallback as I haven't found any polyfills for flexbox: http://jsfiddle.net/borglinm/x6jvS/14/
.top-bar-section > ul {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
.top-bar-section > ul > li {
float: none;
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
.top-bar-section > ul > li > a {
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
}
Here's a solution that might need a bit of tweaking
JSFiddle Here
Sticking to the CSS-only requirements, the only feasible way I can think of is using CSS tables. We create nested table, table-rows and table-cells. The table-cells, by default, will try to maintain equal spacing between itself and other table-cells.
The table-row needs to span the entire topbar minus any Foundation topbar title-areas. To do this, we use an overflow: hidden trick to make the .top-bar-section span the remaining width of the topbar. Finally, we wrap our topbar with a div that has display: table and spans its parent.
Here's the relevant CSS
.top-bar-section {
overflow: hidden;
}
.center-topbar {
display: table;
width: 100%;
}
.center-topbar .full-width {
display: table-row;
}
.center-topbar .full-width li {
display: table-cell;
float: none;
text-align: center;
}
What we are left is with a topbar whose elements are centered and have widths that vary depending on its contents. The $topbar-breakpoint works as normal as well.
Improvements?
Works on Chrome + Safari well on my end (OS X). For Firefox, the dropdown arrow is not displaying due to the removal of the left float. Just wanted to post this to get the conversation going. Anyone have any improvements?
Here's a solution using some built in foundation classes...basically I added 4 classes to your fiddle.
http://jsfiddle.net/x6jvS/7/
<div class="row">
<div class="small-12 columns">
<nav class="top-bar contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
<li>Link 1</li>
<li class="has-dropdown">
Long Link 2
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Even Longer Link 5</li>
<li>Link 6</li>
</ul>
</section>
</nav>
</div>
</div>
added class "contain-to-grid" to the nav element
added classes "web button-group large-block-grid-6" to the "section.top-bar-section > ul" (first ul in that section)
and blammo...seems to work fairly well cross-browser
How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.
This is the navbar in which it occurs:
<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active">Startseite</li>
<li>Kontakt</li>
</ul>
</div>
make a .custom_li class and give
.custom_li{
display:inline-block;
}
EDIT
To force same size, i'll suggest using max-width and place it under some media-query
li{
display: inline-block;
max-width:50%; /* limit width */
word-break:break-all; /* wrap extended text*/
border:1px solid red /* demo */
}
demo here
some optional things
some optional things
When I tried display: inline-block; it removes the bullet.
Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.
CSS
.my-list > li {
float: left;
clear: both; /* remove this if you want them flowing inline */
}
HTML
<ul class="my-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If the display: inline-block; or display: block; is messing up the alignment.
Then just use width: fit-content;
Prevent it becoming a block by adding display: inline-block; to the proper element.
Post more code and preferably CSS if you want details.
I got it to work with the following css:
ul {
margin: 0 auto;
width: fit-content;
}
li{
display:flex;
margin: 0.5rem auto;
}
Basically what I did was make the container width to fit content. Used the CSS hack to make sure it would center using the margin. In the li tag I wanted the contents to be centered so I set it that way
I have a simple menu coded up like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts</li>
<li>Islands</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</li>
</ul>
which looks like this
The little dots in-between each menu item are created using the :after pseudo element. Eveything is working fine, but I also need sub menus, which will be nested lists.
The problem is, when i add a line break to the menu like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts
<!-- LINE BREAK -->
</li>
<li>Islands
<!-- LINE BREAK -->
</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</li>
</ul>
I get this result in Safari & Chrome (But not Firefox)...
It seems to me as though webkit is treating the whitespace as 'pre'. The CSS for the :after element looks like this
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
}
I've also tried setting white-space: normal/nowrap on the ul, li and :after elements which doesn't affect anything.
Can anyone see where I'm going wrong, or is this a problem with Webkit/Firefox?
UPDATE
I've created a demo at http://jsfiddle.net/zmVbH/
The issue is that the line break is white space which makes the floated content drop a line. The issue can be reproduced by adding a single space between the </a> and </li>. Try making the inserted content display:inline-block instead of floated.
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
display:inline-block;
text-align: center;
border: rgba(0,0,0,0.25) 1px solid;
white-space: normal;
}
Updated JSFiddle.
UPDATE BY OP
Yup, inline-block fixes this, but it's not quite that simple since inline-block has some patchy browser support.
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
/* FIX */
display:-moz-inline-stack; /* For older versions of Firefox */
display:inline-block; /* Anything that supports inline-block */
/* IE FIX */
zoom:1;
*display:inline;
}