1

Hello,

I tested the rotation functionality today. If you use only one line, there is no problem, however when you include a newline <br/> tag in the rotated div the two lines are not spaced correctly. It also looks like if the calculated with/height is not correct...

The HTML:
<div class="block state">
<div class="row title">
<div class="name">Item</div>
<div class="state"><div class="rotate">Rotated column 1</div></div>
<div class="state"><div class="rotate">Rotated column 2</div></div>
<div class="state"><div class="rotate">Rotated column 3<br/>Next line</div></div>
<div class="state"><div class="rotate">Rotated column 4<br/>Next line</div></div>
<div class="state"><div class="rotate">Rotated column 5<br/>Next line</div></div>
<div class="state"><div class="rotate">Rotated column last one</div></div>
<div class="comment">Comment</div>
<div class="clear"></div>
</div>
</div>

The css:
div.state div.row {
clear: both;
padding: 0;
margin: 0;
}

div.state div.row div {
display: inline;
float: left;
overflow: hidden;
width: 400px;
height: 40px;
border-right: 1px solid black;
border-top: 1px solid black;
}

div.state div.title div {
height: 150px;
vertical-align: bottom;
}

div.state div.row div.name {
width: 25%;
border-left: 1px solid black;
}

div.state div.row div.state {
width: 7.5%;
}

div.state div.row div.state div.rotate {
overflow: show;
height: 50%;
width: 150px;
rotate: 90;
vertical-align: top;
border: 0px none !important;
}

div.state div.row div.comment {
width: 29%;
}

div.state div.row div.clear {
border: 0px none !important;
float: right;
height: 0;
clear: both;
width: 1px !important;
}

2

it is maybe because the clear:both, display:xxx and !important are not understood by html2pdf, sorry !
and float are working only on images
Ancien pseudo : lolo

3

Those properties are there for the HTML view (in the browser). The cells are positioned correct, only the line-spacing in the rotation is wrong.