Troubleshooting Problem with Counters in Ordered Lists in DOMPDF

I am currently using DOMPDF version 0.8.0 and facing an issue with nested ordered lists when printing. Despite applying correct page breaks, the PDF still displays a bug with the first line on all pages starting from the second page. Here is my current styling:

ol { counter-reset: item; padding-left: 0; line-height: 1;}
ol > li{ counter-increment: item; list-style-type:none; padding-left:2.5em;position: relative; page-break-inside: avoid;}
ol li:before{ content:counters(item, ".") '. ' ; top: 0; left: 0; position:absolute; font-weight: bold;}
ol > li li{ padding-left:2.5em; page-break-inside: avoid; }

The problem arises in the following output sections: 2nd page: https://i.sstatic.net/14Wg1.png

3rd page:

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

If anyone has suggestions for resolving this issue effectively, I would greatly appreciate it. Thank you in advance.

htmlcsspdf-generationdompdfcss-counter

Answer №1

After some troubleshooting, I successfully addressed the issue by making an adjustment to the Frames file in DOMPDF. The solution worked seamlessly and fixed the problem.

Here's the link to the solution for reference.

I hope this information proves helpful to someone. Thank you!

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

Flask caches JSON files automatically

I am currently working on a visualization app using js and python. The functionality of my app is as follows: There is a textbox in the browser where I input an URL The URL is then sent to Python via Flask In Python, the URL is processed to create ...

javascriptpythonhtmljsoncaching

Is it possible to combine sass and css files within the bower_components directory using gulp?

Using gulp-compass and gulp-postcss has been quite a challenge for me. I have been struggling to find the most efficient way to locate CSS files and their dependencies within the public folder, specifically in webroot/css using gulp. Below is an excerpt fr ...

cssgulppostcss

What is the best way to replace input fields with processed values?

I'm struggling to restrict the characters permitted in a number input field. Currently, I am unable to figure out how to remove invalid characters from the inputfield. Below is the code snippet that I am experimenting with: <template> <di ...

javascripthtmlvue.jsinput

Scroll and click functionality with CSS in jQuery mobile

I'm currently in the process of creating a mobile website specifically designed for smartphones using jQuery Mobile. For my first test, you can view it here: I have successfully added content to the page and made it scrollable. However, I've enc ...

jquerycssjquery-mobilescrollsmartphone

Trouble with CSS Positioning: Resizing my browser causes my image to shift in position

Upon resizing the browser window, my website layout adjusts accordingly and looks as intended at a smaller size: However, as I begin to expand the browser width, the centrally positioned image starts shifting towards the left. I aim for the image to remai ...

htmlcss

Extend the width of a div element to fit the size of its absolutely positioned

I am facing an issue with a Div that contains multiple absolutely positioned divs. The clickable area of the main div expands to cover the children, but the drawn area does not. I need the drawn area to encompass all the container divs. You can view a JSF ...

css

Automatically selecting and fetching checkbox values using JavaScript

I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...

javascripthtmlarrayscheckbox

Chart displaying an errant scrollbar at the bottom of the screen

Having trouble with a table that displays a scrollbar when a specific row is added. The first and second rows in the code below display correctly. However, adding the third row within the foreach loop causes a scrollbar to appear at the bottom. This issu ...

htmlcss

Having trouble centering SVGs on the screen

My goal is to shift elements of the SVG to the center of the screen upon clicking, but I haven't been successful so far. It's puzzling because it worked flawlessly with a different SVG. I've tried following the advice given in this post, an ...

javascripthtmlcsssvg

Strategies and Methods for Assessing the Content and Organization of a Website

Seeking recommendations from the stackoverflow community for tools, techniques, and processes to analyze the structure and content of a moderately large, collaboratively edited website. The manual process is time-consuming, so automating it as much as poss ...

htmlweb

Problem with the placement of Google autocomplete dropdown

I'm currently utilizing the NgxAutocomPlace module within my Angular application. This module interacts with the Google Autocomplete API by generating a .pac-container to display autocomplete suggestions. However, I'm facing an issue where on mo ...

cssangulargoogle-places-api

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

javascriptjquerycss

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven&ap ...

htmlcsstwitter-bootstrap

Uninterrupted stream of multi-line div content without any breaks in between

In this scenario, there are three main divs with a width of 100% each, and within each div, there are 3 inner divs with a width of 50%. The current layout is causing a line break after every set of 3 inner elements. <style type="text/css"> .inn ...

htmlcss

"Enhance User Interactions with Angular-ui Tooltips Featuring

I recently integrated bootstrap tooltips into my application. While the "normal" tooltips are working fine, I encountered an issue with tooltip-html-unsafe. It seems to display an empty tooltip. Here is my tooltip code: <a><span tooltip-placeme ...

htmltwitter-bootstrapangularjstooltipangular-ui-bootstrap

Accordion within an Accordion that can be collapsed

Are you familiar with the toggle effect in Bootstrap? When you click on Group 1, it toggles, and when you click on Group 2, Group 1 collapses. Here is an example: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

jqueryhtmltwitter-bootstrapcss

Guide on incorporating clickable hyperlinks in Foundation tooltip

Currently, I am facing an issue with a header tag that has Foundation's tooltip attached to it as per the documentation. The problem is, I want the tooltip to be clickable so that I can display a modal on click, but every time I move away from the div ...

jqueryhtmlcsszurb-foundationfrontend

jquery counter is malfunctioning

I noticed a strange issue with the counters on my website. They count up as expected when the page loads, but for some reason, when the screen width shrinks below 800px, they don't start automatically. However, if I quickly scroll to where the counter ...

javascriptjqueryhtmlcsscounter

Utilizing Partial Views in Hogan.js

Just starting out with Node.js and I have a question. Is there a way to use a single layout for HTML, like shared views and Master Layouts in MVC and ASP, respectively? For example: //. hello_world.hjs <!DOCTYPE html> <html> <head> ...

htmlnode.jslayoutexpresshogan.js