[Ultimate PDF] Changes to CSS of latest version causing lots of problems on layouts of applications.
Reactive icon
Forge component by Leonardo Fernandes
Application Type

Hi there

We recently updated to v12.0.x. But suddenly the documents that we generate are not fitting in and there are lots of spaces between lines of bulleted lists that the systems administrators have captured.

For example, this is how a bulleted list used to generate on our exams systems:

But now it looks like this:

After looking at the CSS, I found that the following was added to UltimatePDF:

.screen-container {

    white-space: pre-wrap;


This causes the bulleted list to render with those massive spaces. 

The bulleted list is part of the content that an administrator has entered into the system and looking at the source, I cannot really see anything wrong:

If I disable the screen-container CSS code in developer Tools, the content renders correctly.

I'm not sure what the function is of the new CSS, however, it is causing our documents to not render correctly. 

Is there a workaround that we can apply to get rid of this CSS? Or is it possible to re-evaluate the CSS code and remove it from the forge component? 



Hi Pieter. The CSS was changed to address the feedback given here: https://www.outsystems.com/forums/discussion/92315/ultimate-pdf-ultimate-pdf-input-line-breaks/

The "white-space: pre-wrap" instructs the browser to take into consideration any whitespace including line breaks. The HTML that you are injecting probably has line breaks between the list items.

Extra whitespace and line breaks are uncommon in reactive applications, because the DOM nodes are created using javascript, instead of an HTML source file. So I believe this new rule is safe for most applications. Only in the case that you are injecting HTML into the PDF is when you might run into problems.

A workaround for you is to reset the white-space property on the "tui-editor-contents" class:

.tui-editor-contents { white-space: normal; }

Let me know if this is an acceptable solution.

Thanks for the quick feedback! I will have a look at your suggestion and give feedback once I'm done.

Thanks Leonardo, the workaround is working! We are using the "markdown editor" component from the forge so that we can limit and better control the content that administrators create - I'm not sure if the white-space issue will affect all the markdown components, or just this one specifically.

Kind regards.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.