search

andrei-m-code / net-core-html-to-image

.NET Core HTML to Image converter
MIT License
127 stars 54 forks source link

Display: flex & flex-direction: row not working #37

Closed ASutrick closed 1 year ago

ASutrick commented 1 year ago

the HTML I am printing is:

<div style="rotate:0deg;flex-wrap:wrap;height:500px;width:100%;margin:0px;display:flex;flex-direction:row;background-color:white;padding:0px;align-content:flex-start;font-family:Baskerville;fontWeight:500;overflow:hidden;font-size:1vw">
  <div style="border:1px solid black;width:49%;fontWeight:500;font-size:1vw">
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">Book:A1</div>
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">Name:DEFAULT BOOK</div>
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">First Last</div>
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">Default County</div>
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">10/2/2023 3:27:09 PM</div>
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">DC Austin Sutrick</div>
  </div>
  <div style="border:1px solid black;width:49%;fontWeight:500;font-size:1vw">
    <div style="width:100%;margin-top:3px;fontWeight:500;font-size:1vw">Pages:291-293</div>
  </div>
</div>

the root div has display: flex and flex-direction: row. The two child two divs have a width of 49%.

the expected output (what I see in browser): expectedoutput

the output im getting from this package: label

ASutrick commented 1 year ago

The problem seems to be that wkhtmltopdf uses deprecated CSS properties. To get the result of display: flex & flex-direction: row you must use display: -webkit-box & -webkit-box-pack: start.