Handle absolute children of flex boxes

[daniel-butler]

Thank you for the amazing project! Because of this project I only have the problem below

Are there any gotcha's with position: absolute? I have not been able to get it to work. I was able to get bootstrap.css working with the pdf, but elements with the style of position absolute do not get rendered.

This is the custom css file

div div#payment_method {
     position: absolute;
     font-weight: bolder;
     opacity: 80%;
     color: #3e1052;
}

..and the html

<div class="row justify-content-center">
  <div
    id="payment_method"
    class="display-2"
  >
    <i>Paid by EFT</i>
</div>

The payment_method id is not rendered if position: absolute is displayed once I remove it the element is displayed, but the element is inline.

[Tontyna]

Reason for absolute box not being displayed is that the row is a flex container (display:flex). This is by purpose or at least it's explicitly programmed. An absolutely positioned box is never a flex item:

WeasyPrint/weasyprint/formatting_structure/build.py

Lines 1149 to 1150 in 05a9513

	if not child.is_absolutely_positioned():
	child.is_flex_item = True

In flex_layout() children of a FlexBox not being flex items are skipped and disappear from the output:

WeasyPrint/weasyprint/layout/flex.py

Lines 121 to 123 in 05a9513

	for child in children:
	if not child.is_flex_item:
	continue

Of course: Absolute boxes aren't part of the flex layout, but instead of disappearing they should be handled as described in the spec.

Until implemented (in version 52?) a "WARNING: ignored absolutely-positioned flex child. Will be implemented in the future" would be nice or at least a # TODO in the source code.

[daniel-butler]

Thank you for the quick and through response!

Just to summarize what seems to be the issue. The reason this doesn't work is because bootstrap v4 uses display: flex. Weasyprint does not allow absolute positioned items in a flex element/container?

Using @Tontyna's explanation I used absolute positioning inherent in bootstrap by adding the class position-absolute to the row element.

[Tontyna]

Weasyprint does not allow absolute positioned items in a flex element/container?

Exactly.

[alberto255345]

Is there any possibility for me to enable "Position: Absolute"? because I have a project that I can't imagine another way to do without "Absolute".