Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Align Text Left and Right Inline (iText7.Html2pdf)

I have some HTML code where I align two spans left and right and this appears properly in the browser with the HTML code but after compiling with iText7 to PDF, the left-aligned text is gone and in its place is the right aligned text (see image 1 and image 2, respectively).

image 1 (HTML):

1. rendered HTML

image 2 (PDF):

2. rendered PDF

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

This is the code I have for my HTML:

<li id="row1">
    <span class="left bold">left-aligned text</span>
    <span class="right bold">right-aligned text</span>
</li>

CSS:

#row1 {
  position:relative;
  max-width: 6.8in;
}

.left {
  position: absolute;
}

.right {
  position: absolute;
  right: 0;
}

I know iText7 is a little finicky with CSS but I figure there is either a way to simply use this basic CSS functionality or a way to trick/work around iText7 to render it as intended.

Any suggestions?

**EDIT:
display: inline works so I suspect it is a matter of iText7 not handling absolute positioning.

>Solution :

Try to use float CSS property to place elements on the left or the right.

So here’s your code:

#row1 {
    position: relative;
    max-width: 6.8in;
}

.left {
    float: left;
}

.right {
    float: right;
}
<li id="row1">
    <span class="left bold">left-aligned text</span>
    <span class="right bold">right-aligned text</span>
</li>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading