Hi Mike,

James here from DocRaptor. This is a common issue our users are running into. Prince doesn't appear to properly support either of the industry standard "clearfix"s, which are used by Bootstrap and most other CSS frameworks.

A version of this code (normally applied in an :after psuedo-element) is the standard clearfix:

<div style="display: table; clear: both; line-height: 0;"></div>

That code should clear the float and make the parent div in the attached examples have a red background.

James Paden - DocRaptor

Try DocRaptor - PrinceXML web service and official PrinceXML partner

1. no-background.html‎ 0.8 kB ‎
   No background at all
2. some-background-with-border.html‎ 0.9 kB ‎
   background on the first page only

Edited 1 Jun 2017 by jamespaden

Strangely enough, here's another version of the issue with a clearfix with a 1px height and no visibility. The background is only the 2nd page in this version.

Try DocRaptor - PrinceXML web service and official PrinceXML partner

1. background-on-2nd-page.html‎ 0.8 kB

And lastly, some examples of strange behavior when I float the parent div instead of using a clearfix.

Try DocRaptor - PrinceXML web service and official PrinceXML partner

1. floated-parent-with-bg.html‎ 0.7 kB
2. floated-parent-without-bg.html‎ 0.8 kB

Thanks, we will investigate these issues.

We have included a workaround for some of these clearfix issues in the latest build, although there are still some remaining issues where the block crosses a page break.

The latest build has further improvements for the clearfix case where the block crosses a page break.

Standard clearfix with :before and :after pseudoclasses still don't work on the latest build.

Would you be able to attach an example HTML and CSS?

The clearfix method described here works for me. This shorter version should also work:

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Yes, this works. Unfortunately it inserts an unintentional page break in a multi-column layout when used on an element with 'column-span' set to 'all'

You can workaround this by applying a certain height:

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 2px;
}

Hi John,

Would you be able to provide a test case showing this problem?

Thanks,
Mark

Hi John, I tried to find the problem but failed. Attaching my attempted test case. Maybe you can share some of your markup or enhance this attachment till it shows the problem to help us figure out what Prince is doing wrong?

Announcement: repos for tests/utils

1. 3677.htm‎ 4.3 kB ‎
   Attempted test case

Hi hallvord,

I will try to do what I can to be of any help. We are extremely busy right now. Please give me a few days and I will isolate the issue and prepare a test case.

Greetings,
John

Edited 23 Mar 2020 by John

Thanks! If it helps, I'm happy to assist isolating & minimising things if it is possible for you to share a URL or file

Announcement: repos for tests/utils

1. 3677.htm‎ 4.4 kB ‎
   further developed still imperfect test

Edited 28 Mar 2020 by hallvord