Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex-box rendering layout issues with multiline text #667

Closed
tokyovigilante opened this issue Aug 11, 2018 · 6 comments
Closed

Flex-box rendering layout issues with multiline text #667

tokyovigilante opened this issue Aug 11, 2018 · 6 comments
Labels
bug Existing features not working as expected
Milestone
43

Comments

@tokyovigilante
Copy link

tokyovigilante commented Aug 11, 2018 •
edited by liZe
Loading

I've moved my CV over from a Word document to HTML with Weasyprint, and am now converting my table-based layout to flex-box using master. However it seems to have a layout bug when a single line of text is laid out with a multi-line paragraph adjacent.

Sample code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @media print {
            @page {
                size: A4 portrait;
                margin: 1.5cm !important;
                margin-top: 1cm !important;
            }
        }
        body {
            font-family: "serif";
            font-size: 11pt !important;
            text-align: left;
            line-height: 1.25;
        }
        .d-flex {
            display: flex !important;
        }
        .col1 {
            flex: 0 0 90pt;
        }
    </style>
</head>
<body>
    <h1>Real Name</h1>
    <p>Cool Street</br>
    Awesome Suburb</br>
    +123456007</br>
    </p>
    <div class="d-flex">
        <div class="col1">
            <p><em>Introduction</em></p>
        </div>
        <div>
            <p></p>
            <p>Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text </p>
            <p>Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text Lots of body text </p>
        </div>
    </div>
    <div class="d-flex">
        <div class="col1">
            <p><em>Employment&nbsp;History</em></p>
        </div>
    </div>
</body>
</html>

I'd expect the heading Employment History to be rendered below the body text blocks (and indeed it is in Chrome) however Weasyprint renders it near the bottom of the body text. If I remove the fixed width column things are even worse with the body text rendered over the top of the headings.

Using a <table>-based layout works fine but then I have some difficulty aligning more complex layouts elsewhere in the document and being able to use flex-box would solve all my problems.

Thanks for Weasyprint BTW, it's amazing software!
@Tontyna
Copy link
Contributor

Tontyna commented Aug 12, 2018

Looks like the height of the div with lots-of-body-text paragraphs is calculated without indenting it by the col1 width. When its left side later gets indented, no recalculation of its height is done -- a style="border: 1px solid" makes that assumption visible.

Found a strange workaround -- which might be a hint for @liZe where to fix the bug:
The Employment History can be moved to the correct place by giving the <div> with the lots-of-body-text a style="overflow:hidden".

@tokyovigilante
Copy link
Author

tokyovigilante commented Aug 13, 2018 •
edited
Loading

Hi @Tontyna, thanks for looking into this and identifying the probable cause. One note, your workaround does work but ignores the p { margin-bottom: 1em; } style I have in the real document.

In fact there are a few situations where the margin-bottom style isn't taken into account for the flex calculations it seems, but that might be a separate bug. I'm also having some problems with a nested-flex layout with justify-content: space-between; (for right-aligned text in-line with left-aligned text) but that's probably a separate bug too.

@liZe liZe added the bug Existing features not working as expected label Aug 13, 2018
@liZe liZe added this to the 43 milestone Aug 13, 2018
@liZe liZe closed this as completed in a83ba5a Aug 17, 2018
@liZe
Copy link
Member

liZe commented Aug 17, 2018

@tokyovigilante It's fixed, thanks for the report!

We currently have a tiny opinion survey open in #635, would you be interested in writing a little message? Thank you!

@tokyovigilante
Copy link
Author

@liZe Thanks so much! The flex-box spacing is perfect now.

I still have two smaller issues that I mentioned in my reply to @Tontyna above about p { margin-bottom: 1em; } being ignored within a flex-box, and nested flex items not being laid out on one line, shall I open separate issues for them? Can provide test cases for both.

I will leave a message as you request.

@liZe
Copy link
Member

liZe commented Aug 17, 2018

I still have two smaller issues that I mentioned in my reply to @Tontyna above about p { margin-bottom: 1em; } being ignored within a flex-box, and nested flex items not being laid out on one line, shall I open separate issues for them? Can provide test cases for both.

Yes, you shall!

I will leave a message as you request.

Thank you!

@tokyovigilante
Copy link
Author

As requested, #672 and #673. Thanks so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
43
Development

No branches or pull requests
3 participants
@tokyovigilante @liZe @Tontyna