I have a page I'm trying to turn into a PDF that contains some floated elements within non-floated elements, and some more non-floated elements beneath them. How do I get prince to respect the height of the floated elements (thus extending the border of the enclosing element to contain the floated elements)? In the browsers, I simply use overflow:auto on the containing element, but prince does not appear to respect that property. Any ideas?
Forum › How do I...?
Floated Elements - overflow:auto;
Specifying "overflow: hidden" should produce consistent behaviour in Prince and the browsers. We don't support "auto" at the moment, which is not well defined by CSS 2.1.
That does in fact fix the layout issues - everything is now in the appropriate place - and the borders are visible etc. However, the text within the container is not visible - it's definitely there - I can highlight and copy it into a text document - but it's just not visible. Any guesses as to what I can do to make it work?
Is there something drawn over the top of it? Does it have a transparent color? Is it outside the border and getting clipped away?
It would seem that the text is transparent. here is a screenshot of the problem in question. The top part is the pdf (with the invisible text highlighted), the bottom part is the source html in a browser - kinda wacky, right? That's with the overflow set to "hidden". When it's set to "visible" the alignment is all wrong - so - I'm stumped.
I would guess that it's being clipped away. Would you be able to email me (mikeday@yeslogic.com) some sample HTML/CSS to take a look at?
It seems that it is being clipped because the outer div with overflow hidden does not have a border. If a border is added to this div, everything works fine, but without a border the div collapses to zero height and all the float content overflowing outside of it is hidden.
Of course, it's hard to tell that it's collapsing to zero height without adding a border, and as soon as you add a border it returns to normal!
This looks like a bug in Prince, as browsers keep it the correct height with or without a border. We'll need to take a look at this.
In the meantime a suitable workaround might be to add a transparent border to the div, like this:
This should not affect the appearance, but will fix the height and clipping issues.
Of course, it's hard to tell that it's collapsing to zero height without adding a border, and as soon as you add a border it returns to normal!
This looks like a bug in Prince, as browsers keep it the correct height with or without a border. We'll need to take a look at this.
In the meantime a suitable workaround might be to add a transparent border to the div, like this:
border-bottom: transparent solid thin
This should not affect the appearance, but will fix the height and clipping issues.
In the new beta for Prince 7.0 we have changed the behaviour of the overflow property to more closely match web browsers.