I've successfully created a list using the following answer with flexbox on my HTML page How to display 3 items per row in flexbox?
I have a need to create a PDF with this data and I'm using wkhtmltopdf (https://wkhtmltopdf.org/) which also works fine however the PDF generated has all my List Items in 1 long column instead of 3 per row.
Looks like the CSS is not being processed when the PDF generation is happening any insight is appreciated.
This worked for me :
.row {
display: -webkit-box; /* wkhtmltopdf uses this one */
display: flex;
-webkit-box-pack: center; /* wkhtmltopdf uses this one */
justify-content: center;
}
.row > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.row > div:last-child {
margin-right: 0;
}
See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 for more informations.
I resolved this issue using:
equivalent of display:flex; ==> display: -webkit-box;
equivalent of justify-content: space-between; ==> -webkit-box-pack: justify;
Some useful informations coming from:
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522
I used autoprefixer in my application to automatically add prefixes. You just need to update browsersList with ie >= 9.
Try to decrease the width of the flex columns. For example when I tried to make 50/50 columns I had to put a width of 49.8% instead of 50%. Hope it helps.
To use flex or boxes while converting to pdf, You need webkit
Example:-
display: flex;
display: -webkit-flex;
for justify-content and align items you have to use
-webkit-align-self: flex-end;
align-self: flex-end;
webkit-justify-content: space-between;
justify-content: space-between;
As fix for Bootstrap 5, working with wkhtmltopdf 0.12.*, I found and completed the following style
<style>
/* Fix wkhtmltopdf compatibility with BS flex features */
.row {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.row>div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.row>div:last-child {
margin-right: 0;
}
/* Fix wkhtmltopdf compatibility with BS tables borders */
/* Requires cellspacing="0" on table to prevent spacing */
table {
border-collapse: separate !important;
}
th,
td {
border-top: none;
border-left: none;
border-right: none;
}
</style>
source saved my day while upgrading from bs 4 to bs 5.
This worked for me:
.row {
white-space: nowrap;
> div {
display: inline-block;
white-space: normal;
}
}
Related
I am using Shopify theme, I am displaying four product in each row. Everything is working perfectly except product column height. I need the equal height of each column. I tried display: tablethe parent class and display:table-cell to child class but still not working. Also tried display:flex
I am sharing the link to code because of my code huge and not allowing me to upload here.
https://jsfiddle.net/a8ag2270/1/
I am getting the output. I need equal height.
Okey, that's the best I can do for now.
https://jsfiddle.net/a8ag2270/49/
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
/* had to target more specifically with (div.grid-view-item) */
/* so the margin: 0px auto 35px; gets overridden */
div.grid-view-item {
display: flex;
flex-direction: column;
height: 100%;
margin: 0; /* instead of margin: 0px auto 35px; */
}
.grid-view-item__link.grid-view-item__image-container {
display: flex;
flex-direction: column;
flex: 1;
}
/* same story here */
div.grid-view-item__meta {
margin-top: auto; /* override margin-top: 8px; */
}
It can probably be done with a lot fewer styles (or maybe not), but I like flexboxes and working with them, so I used that.
What you need to do on your own is to set min-height to title, description etc. if you want them to be "aligned horizontally" (can't find the right words for that) with each other.
The above styles put the price down, right above the button. If you don't want that behaviour, you can use this:
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
div.grid-view-item {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
.grid-view-item__link.grid-view-item__image-container {
flex: 1;
}
or this:
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
.grid__item {
display: flex;
}
div.grid-view-item {
display: flex;
flex-direction: column;
}
.grid-view-item__link.grid-view-item__image-container {
flex: 1;
}
add Below code in your css file:
#Collection > .grid--view-items
{
display: flex;
flex-flow: row wrap;
}
#Collection .grid__item
{
display: flex;
}
#Collection .grid-view-item
{
display: flex;
flex-direction: column;
}
#Collection a.grid-view-item__link.grid-view-item__image-container
{ flex: 1 0 0; }
Just add a style to the grid-view-item__link like
.grid-view-item__link{
height:400px;
}
Change the 400 to whatever height you want.
Here is the fiddle
CSS3 Flexbox row wrap is not working in iOS version 8.3 only. As per the suggestion on the link, I have updated my code. But still, it is not wrapping as expected.
`
.case-study-list {
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 0 0 30px;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
.case-study-item {
list-style-type: none;
min-width: 180px;
padding: 30px 20px 0;
-webkit-flex: 1 1 180px;
-ms-flex: 1 1 180px;
flex: 1 1 180px;
}
}
`
Please find the link to my fiddle.
I'm really stuck with this. Any help is much appreciated.
Seems you missed to add prefix on display property. Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.
.case-study-list {
display: -webkit-flex;
display: flex;
}
Here are some link's that might help you
CSS Autoprefixer
FLEXBOX CHEAT SHEET
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.
Let's check this fiddle:
img {
float: left;
}
#inner {
height: 128px;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
}
#content {
background-color: red;
}
<img src="http://cdn.memegenerator.net/instances/250x250/37934290.jpg" width="128" height="128" />
<div id="inner">
<div id="content">text text tertkl elknr tlken lsl kdmfsldkfmsldkfmslkd mfkndfln dflkfndg lkn</div>
</div>
this works so far as I expect - text is centered, and as you shrink the width, text goes underline: but then its "too far" from the image. The best would be if the vertical-align: middle; became vertical-align: top; when it needs to jump. How to do it without possibly jQuery?
A simple way to achieve this is to use a CSS Media Query.
Your markup would stay the same and your CSS would only need to have the following added:
#media screen and (max-width: 290px) {
#inner {
vertical-align: top;
}
}
in action: http://jsfiddle.net/uWMkH/1/
What that says is, "When the viewport's width is no more than 290px, do this stuff to #inner.
Take a look at these links for more information:
http://www.w3.org/TR/css3-mediaqueries/
http://cssmediaqueries.com/
http://css-tricks.com/css-media-queries/
The caveat with using media queries to do this is that they aren't supported in IE8 and below. I hope you don't have to deal with those headaches!
Look here for a complete list of browsers with support:
http://caniuse.com/#feat=css-mediaqueries
You can do this without media queries, but it requires a browser that supports the entire CSS Flexible box module (most browsers are missing support for wrapping). At this point in time, support is limited to Opera, Chrome, and IE10.
http://codepen.io/cimmanon/pen/rFdkt
figure {
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: yellowgreen;
}
#supports (flex-wrap: wrap) {
figure {
display: flex;
}
}
figcaption {
-webkit-flex: 1 15em;
-ms-flex: 1 15em;
flex: 1 15em;
background-color: red;
}
What Flexbox offers over media queries is the ability to reflow the content based on the available space, not just the browser width.