I have the following HTML and css that works great in Firefox and Chrome to create a 3-column grid of boxes. But, in Safari it takes all the boxes and puts them into 1 row, squishing the width of each one so it will fit instead of allowing the float to push the boxes to a new line.
How can I get it to looks the same in Safari, any ideas?
(note: the html class '.box' is in a loop that dynamically generates boxes based on user input, so the number of boxes is variable)
HTML:
<div id="home-grid">
<div class="box">
Contents of box
</div>
</div>
CSS:
#home-grid {
margin-top: 20px;
float: left;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
flex-flow: row wrap;
justify-content: space-between;
width: 100%
}
#home-grid .box {
position: relative;
float: left;
width: 192px!important;
height: 180px;
border: 1px solid #F73987;
margin-bottom: 20px;
overflow: hidden;
}
I was able to get it to work in the latest version of Safari by adding these two lines:
-webkit-flex-flow: row wrap;
-webkit-justify-content: space-between;
see jsfiddle
Just to clarify, Safari still needs the -webkit prefix, according to caniuse.com
Related
In one of my website pages, I would like to add a picture with a dynamic size.
To do this, I follow the excellent tutorial of W3school : link
This method works perfectly on Safari and Chrome; but gives me an error on firefox..
Doing the analysis of the containers sizes, I thought the calculation seems to be different..
First, here is the Chrome and Safari method:
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% (because we also use the width of the blue one as basis for % calculation)
Then, in firefox it gives me this result :
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% of the height of the blue one, and not 40% of his parent width !
body {
background-color: blue;
}
.home_box {
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture {
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
/*background: url('../Img/picture.jpg') no-repeat;
background-size: contain;*/
}
.home_box p {
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
<p>Lorem ipsum</p>
</div>
Could you help fixed this issue please ?
Perhaps it's a problem with your Firefox version. When I run this code (slightly tweaked from yours and shown below) on Firefox 72 I get an output shown in the image below, same as what I get in old Microsoft Edge, Chromium-based Edge and Safari. Is the output correct?
body{
background-color: blue;
}
.home_box
{
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture
{
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
background-size: contain;
}
.home_box p
{
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
</div>
I have ul element with display:flex and anchor inside li element with display:flex but text in anchor is getting truncated when width is restricted.
Test case:
http://jsfiddle.net/ypfcjfk8/4/
HTML & CSS markup
Home
Getting Started
Long LabelLong LabelLong LabelLong Label
Contact us
Support
Home
Getting Started
Long LabelLong LabelLong LabelLong Label
Contact us
Support
.list-element {
display: flex;
flex-direction: row;
min-height: 2.71429rem;
}
.list-item-element {
display: block;
flex: 1 1 auto;
padding: 10px;
}
.list-item-content {
display: flex;
flex: 1 1 auto;
}
.list-item-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#test {
width: 300px;
overflow: hidden;
border: 1px solid red;
}
Expected behaviour: it should truncate whole list not individual item.
Expected output screenshot:
This works fine on ie 11 and Firefox, chrome but not on safari. Any help is much appreciated. Thanks in advance.
You have to use proper flex declarations for all browsers. Following code block made your fiddle look good in my Safari (win8).
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
Check this page out: https://css-tricks.com/using-flexbox/
I want to create a vertical list, where each row shrinks its width to perfectly contain its inner content (versus the default div behavior of expanding its width to fill the container).
I'd like to do this with only one HTML element for each row (no extra wrapping divs).
The following code does exactly what I want, but it doesn't work in Safari (bug?).
.container {
margin: 10px;
border: 2px solid #999;
padding: 5px;
display: flex;
flex-direction: column;
width: 300px
}
.row-item {
padding: 5px;
margin: 5px;
border: 1px solid green;
/* this will shrink the width to the inner content
in Chrome and Firefox, but not in Safari */
margin-right: auto;
}
<div class='container'>
<div class='row-item'>Item #1</div>
<div class='row-item'>Another Item...</div>
<div class='row-item'>Item No. 3</div>
</div>
Here is a codepen with the above code: http://codepen.io/anon/pen/woKYqx
I know that it is trivial to solve this problem by adding a wrapping div and then using display: inline-block on the inner element (or several other similar solutions).
However, it seems like it should be possible to solve this without adding extra HTML elements. It is a fairly simple layout.
Is there a cross-browser way to do this with a single HTML element for each row?
You're using margin-right: auto to push the element all the way to the left, which also forces the item to take the width of its content.
This is a good method but, as you've noted, it fails in Safari.
A simple alternative is to use align-self: flex-start on the flex items:
.row-item {
padding: 5px;
margin: 5px;
border: 1px solid green;
align-self: flex-start; /* NEW */
/* margin-right: auto; (can be kept or removed) */
}
OR, just use align-items: flex-start on the flex container.
.container {
margin: 10px;
border: 2px solid #999;
padding: 5px;
display: flex;
flex-direction: column;
align-items: flex-start; /* NEW */
width: 300px
}
You can erase all flex stuff and use float:left and clear:left on the children, and overflow-x: hidden on the parent:
http://codepen.io/anon/pen/pNjQJJ
When you are using display: flex you should also use the vendor prefixes for it.
too support older versions of browsers
when in doubt check up on caniuse.com
.container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -webkit-flex; /* NEW - Chrome */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: flex;
/* ETC */
}
NOTE: caniuse.com have written about bugs being reported about flexbox childrens height in safari.
I'm using flexbox here - http://marcinzalewski.net/exo/ but I can't fix this for IE 11. Even Microsoft Edge is working fine and IE 11 is only version I need to fix.
My flex-container look like this:
.flex-container {
max-width: 1240px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-webkit-flex-wrap: row wrap;
justify-content: center;
padding: 0;
margin: 0 auto;
list-style: none;
}
And this is my inside elements code:
.offer-element {
width: 250px;
height: 250px;
border-radius: 50%;
margin-top: 60px;
margin-left: 25px;
margin-right: 25px;
}
Now those elements should be centered and fit in few lines, but they all are in the same line and have ~150px instead of 250px each. I tried to add display: -ms-flexbox; but it doesn't work anyway. Normally they are all centered and take 3 lines.
It looks like you're specifying flex-wrap only on webkit. By default flex will fit all items one line. You need to specify flex-wrap: wrap on your container.
IE 11 requires a unit to be added to the third argument, the flex-basis property
https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx
I have recently been developing a website using flexbox, and have been doing so on Chrome. The site looks perfect on Chrome (and Safari, according to users) however it has some serious issues when viewed on Firefox and IE. I have tried to look online for documentation on which prefixes to include in my CSS and how to make it appear normal on those browsers, but I truly cannot find a summation or tutorial anywhere. Here is a sample of my CSS code, containing flexboxs that do not display correctly on Firefox and IE -
.header {
padding: 12px;
padding-top: 10px;
padding-bottom: 0px;
margin: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
height: 70px;
background-color: #000000;
}
.header-box {
padding-left: 15px;
padding-right: 15px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
align-content: flex-start;
align-items: flex-start;
height: 70px;
width: 1170px;
background-color: #000000;
}
This code is for a header bar along the top of the site. I thought by including the display: -moz-box; and such, that would allow it to be seen on Firefox, but the formatting is messed up in the sense that the box is not centered but instead along the left side of the screen, and the boxes within the header are all along the top of the parent container rather than on the bottom. Thank you for any insight you may have on this problem!
In only works on webkit browsers because you only use
-webkit-flex-flow: row wrap;
You should use the standard
flex-flow: row wrap;
Otherwise, the initial value row nowrap will be used instead.