I have a page in html which looks :
Next I'm using NReco.PdfGenerator library to generate html->pdf The result of the above page:
My html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.main-body {
width:674px;
}
.bottom-border {
border-bottom: 1px solid black;
}
.left-column{
width:50%;
float:left;
}
.left-column-small{
display: inline-block;
float:left;
margin-right:11px;
}
.right-column-big{
display: inline-block;
text-align:left !important;
}
.right-column{
width:50%;
float:right;
}
.text-right{
text-align:right;
}
.display-flex {
display:flex;
}
.flex {
flex:1;
}
.remove-margin {
-webkit-margin-after: 0em;
}
.border-right {
border-right: 1px solid black;
}
.border-top {
border-top: 1px solid black;
}
.margin-left {
margin-left:17px;
}
.align-left{
text-align:left;
}
</style>
</head>
<body>
<div class="main-body">
<div class="bottom-border">
<p>Centrum medyczne</p>
<p><br/></p>
</div>
<div class="display-flex">
<div class="left-column flex">
<span>Imie nazwisko</span>
<br/><br/><br/>
<p class="remove-margin">OL</p>
</div>
<div class="right-column text-right flex">
test<br/>
test2<br/>
test3
<p class="remove-margin">OL</p>
</div>
</div>
<div class="display-flex">
<div class="left-column flex border-right">
<span>oko prawe</span><br/>
<span>Fakijne</span><br/><br/>
<span>data<span><br/>
<div class="left-column-small flex ">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
<div class="right-column-big text-right flex">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
</div>
<div class="right-column flex">
<div class="text-right flex">
<span>oko lewe</span><br/>
<span>Fakijne</span><br/><br/>
</div>
<div class="margin-left">
<div >data</div>
<div class="left-column-small flex ">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
<div class="right-column-big flex">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see above, it differs from the pattern I tried to change the code but to no avail. I also changed zoom but it didn't help. I don't know where this empty space is from. Thank you for your help
This happens because of
by default wkhtmltopdf (which is internally used by NReco.PdfGenerator) uses 'smart shrinking' and tries to determine web page width automatically, but no less than ~800px (for default 96dpi). So you have to increase width of your page or use width:100%.