When the report generator creates orders in html, it uses absolute positioning to ensure the exact layout from the report designer is preserved.
Each order row contains a product description and price. Following the order row, there is a horizontal line or other content. If the product description wraps into multiple lines, a horizontal line should appear between each line of the product description:
https://i.sstatic.net/CaMI6.png
Is there a way to fix this so that the horizontal line appears directly after the product description? It's challenging because the absolute positioning and hardcoded width cannot be easily changed, so they need to remain as they are. Could an inline layout or another method be used to ensure the div containing the horizontal line is rendered after the previous content?
The 'row' class has position: relative, yet for some unknown reason the horizontal line does not always appear after the product description.
<html>
<head>
<style>
.row {
position: relative;
clear: both;
}
.field-stretch {
position: absolute;
}
.horizontalline {
border: 1px solid #000000;
position: relative;
display: inline-block;
}
.field {
position: absolute;
} </style>
</head>
<body>
<div class='row'>
<div class='field-stretch' style='width:9cm;'>Content wrapped to multiple rows aaaaaaaaa bbbbbbbbbbb ccccccccc</div>
</div>
<div class='row' style='min-height:0.5cm'>
<div class='field' style='left:8cm;width:2cm'>186</div>
</div>
<div class='row'>
<div style='width:9cm' class='horizontalline'></div>
</div>
</body>
</html>