Inline Align Left and Right Text (Using iText7.Html2pdf)

I have encountered an issue with my HTML code where I have two spans aligned left and right, which displays correctly in the browser. However, when I convert it to PDF using iText7, the left-aligned text disappears and is replaced by the right-aligned text (refer to image 1 for HTML view and image 2 for PDF view).

image 1 (HTML):

https://i.sstatic.net/T4RuO.png

image 2 (PDF):

https://i.sstatic.net/V9jLV.png

This is the HTML code snippet causing the issue:

<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;
}

It seems like iText7 has issues interpreting CSS properly, so I am looking for a solution either within CSS or a workaround to ensure that the alignment renders correctly in the PDF.

Answer №1

To position elements on the left or right, consider using the float CSS property.

Here is an example code snippet:

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to properly center my logo vertically

At my website, the logo in the top left corner is not centered. Here is the code I am using: .header_col1 { float: left; width: 20%; background: #009240; text-align: center; position: relative; } .header_col1 a { /* my logo */ d ...

Utilizing the NG-CLASS directive within a material table to target a specific 'row' element for styling in CSS

I have a table with various columns, one of which is a status field. I am looking to display colored badges in that column based on the status of each record, which can be "Completed", "Deleted", or "Canceled". I have attempted to use ng-class to dynamical ...

A guide to resizing images to fit the page in React using Bootstrap

Currently, I am utilizing a function to iterate over each item in the props array and generate an image tag. My goal is to have every set of 3 images enclosed within a row div using Bootstrap to ensure proper page layout. However, I am struggling to implem ...

One DataTable cell with a unique feature: two buttons of varying sizes

Currently, I am working with a DataTable that contains a column with two Bootstrap-styled buttons. Strangely, the button on the right appears slightly smaller than the one on the left. Picture illustrating the issue Here is the code snippet: <div cla ...

Choose content within an HTML tag and modify its appearance

<body> This is text1 <div> This is text2</div> </body> I'm looking to style the text1 only. I attempted to use body{ color:red; } but both text1 and text2 ended up turning red. What I really need is something like th ...

Using RadStyleSheetManager for Optimizing CSS Caching

After implementing the RadStyleSheetManager in my master pages using the given code snippet, I noticed a significant improvement in the performance of my web application. In Internet Explorer 8, the number of dynamically generated WebResource.axd files had ...

Arrangement of components within a button

I am working with a bootstrap drop-down menu where the button contains text and an icon. I am trying to align the text to the left and the icon to the right within the button without using additional elements in the grid layout. Any suggestions would be gr ...

Is there a way to customize the visual appearance of radio buttons by using unique color schemes

Incorporating bootstrap 4, I have implemented a basic set of custom yes/no radio buttons. <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="rd_1" name="rd" class="custom-control-input green" value="Yes"&g ...

What steps can be taken to strip HTML tags from an RSS feed using a shell script and then export the cleaned data as a

My issue lies in parsing an XML feed and extracting two fields (title and link), which is functioning correctly. I am now seeking a way to strip away all HTML tags and store the result in a CSV format, as shown below: title,link title,link title,link ...

css: discrepancy in positioning between image and header

I'm struggling to properly align an image with a header within a navigation menu. The desired outcome is for everything to be aligned at the bottom. I have set up a jsfiddle to showcase the problem: http://jsfiddle.net/graphicsxp/j2t9R/ ...

What could be causing this Angular dependency to go unnoticed?

I am currently developing an angular application and organizing my logic into separate files. I have created stub modules in app.js, services.js, and controllers.js with the intention of implementing them in individual files. However, I am facing difficul ...

AngularJS feature enables dynamic file naming, causing JSHint error to appear

One interesting thing about my DOM with AngularJS is the following element... <img class="optional" src="assets/img/{{ctrl.optional}}.png" ng-click="ctrl.clickOptional()"> This image is dynamically generated when the page loads. Whenever I click on ...

What's the best way to determine the background image on this website? I'm in the process of replicating a site on

I have been asked to clone the website in order to create a Wordpress site. The original site is currently on Kajabi platform. I managed to download all images from the Kajabi site by right-clicking and selecting download. However, there are certain image ...

Is it possible to decrease the spacing between headers?

Can anyone help me figure out why there is automatic blank space between two headlines in HTML? I need to remove the space marked by the red arrows. https://i.sstatic.net/RPr3Z.jpg My HTML Code: <body> <h1>Der Gecko<h1> ...

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: https://i.sstatic.net/TEU2a.png My goal is to ensure that each section inside t ...

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

"Creating a 2-column layout for an unordered list using CSS Flex

After spending far too much time at work today pondering this issue, I've decided to turn to the collective wisdom of the internet. My dilemma involves a standard <ul> containing multiple <li> elements (currently 12, but this number could ...

Materialize.css | managing spaces, indentation, and 'overriding' in a span element

I recently started using a new framework called Materialize CSS for my project and I'm still getting the hang of it. One issue I've encountered is that long texts in my sidebar are creating large spaces between line breaks and strange indents. D ...

Is it possible to modify the value on the src img tag prior to scraping the data

Hey everyone, check out this piece of code I have: foreach ($image as $snimka){ $url = $snimka->src; $ch = curl_init($snimka->src); $fp = fopen('images/' . basename($url), 'wb'); curl_setopt($ch, CURLOPT_FILE, $fp ...

Set dimensions for the input submit border inside

Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the elemen ...