Forum Bugs

Clearfix not supported

jamespaden
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.html0.8 kB
    No background at all
  2. some-background-with-border.html0.9 kB
    background on the first page only

Edited by jamespaden

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.html0.8 kB
jamespaden
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.html0.7 kB
  2. floated-parent-without-bg.html0.8 kB
mikeday
Thanks, we will investigate these issues.
mikeday
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.
mikeday
The latest build has further improvements for the clearfix case where the block crosses a page break.
niksajanjic
Standard clearfix with :before and :after pseudoclasses still don't work on the latest build.
mikeday
Would you be able to attach an example HTML and CSS?
markbrown
The clearfix method described here works for me. This shorter version should also work:
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
John
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' :(
John
You can workaround this by applying a certain height:

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

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

Thanks,
Mark
hallvord
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.htm4.3 kB
    Attempted test case
John
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 by John

hallvord
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.htm4.4 kB
    further developed still imperfect test

Edited by hallvord