Flying saucer issue when rendering a div with height = 100%

485 views

Skip to first unread message

Bad Dem

unread,

Nov 29, 2019, 7:38:18 PM11/29/19

to Flying Saucer Users

Hi,

I have an issue when i try to convert html to pdf with flying saucer version 9.1.19:

Here is the html code :

<html lang="en">
<head>
<title>Test</title>
<link href="style-lite.css" rel="stylesheet" />
</head>
<body>
        <div class="box">
                <div class="box_text_bold">Date</div>
                <div class="box_value">03/03/2019</div>
        </div>

        <br/>

        <div style="padding: 15px;">
                        <div class="sub_div_first">
                                <span class="block_label">Block 1:</span>
                                <span class="block_value">value 1</span>
                        </div>

                        <div class="sub_div">
                                <span class="block_label">Block 2:</span>
                                <span class="block_value">value 2</span>
                        </div>

                        <div class="sub_div">
                                <span class="block_label">Block 3:</span>
                                <span class="block_value">value 3</span>
                        </div>
                        
                        <div class="sub_div">
                                <span class="block_label">Block ...</span>
                                <span class="block_value">value ...</span>
                        </div>
                        
                        <div class="sub_div">
                                <span class="block_label">Block n</span>
                                <div style="padding-left:40px;">
                                        <div class="sub_div">
                                                <span class="block_label">Block n.1</span>
                                                <span class="block_value">data 1</span>
                                        </div>  
                                        <div class="sub_div">
                                                <span class="block_label">Block n.2:</span>
                                                <span class="block_value">data 2</span>
                                        </div>                                          
                                        <div class="sub_div">
                                                <span class="block_label">Block n.3:</span>
                                                <span class="block_value">data 3</span>
                                        </div>  
                                </div>
                        </div>
        </div>

</body>
</html>

and the style sheet :

.box {
    display: blockk;
        position: relative;
}
.box_text_bold {
        position: relative;
        float: left;
        width: 180px;
        overflow: hidden;
}
.box_text_bold::after {
    content: "";
    border-bottom: dotted;
    width: 100%;
    position: absolute;
    top: 17px;
}
.box_value {
        margin-left: 180px;
}
.sub_div {
        position: relative;
}
.sub_div::before {
    content: "";
    border-left: dotted;
    height: 100%;
    position: absolute;
    left: -15px;
}
.sub_div:last-child::before {
    height: 13px;
}
.sub_div_first {
        position: relative;
}
.sub_div_first::before {
    content: "";
    border-left: dotted;
        top: 13px;
    height: 13px;
    position: absolute;
    left: -15px;
}
.block_label {
  padding-left: 5px;
}
.block_label::before {
    content: "";
    border-top: dotted;
    width: 15px;
    position: absolute;
    left: -15px;
    top: 13px;
        bottom: -26px;
}
.block_value {
  padding-right: 5px;
}

Here is the render in a browser: html render

But when I convert it to a pdf with the last version of flying-saucer 9.1.19, I get this output, pdf render

For the date div, I don't know what is the problem.

But for the second div, the issue should be with heigth=100%, that is not interpreted.

It will be nice to have some support for the 2 issues.

Regards,

Reply all

Reply to author

Forward

0 new messages