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

Table columns are overlapped inside flexbox #671

Closed
AmaiKinono opened this issue Sep 12, 2024 · 2 comments
Closed

Table columns are overlapped inside flexbox #671

AmaiKinono opened this issue Sep 12, 2024 · 2 comments
Labels
layout Layout engine issues and enhancements

Comments

@AmaiKinono
Copy link
Contributor

I've created an example in the tutorial directory. The rml file:

<rml>
    <head>
        <link type="text/css" href="tutorial.rcss"/>
        <title>Window</title>
    </head>
    <body>
        <table>
            <tr>
                <td>A: </td>
                <td> <input type="text" /> </td>
            </tr>
            <tr>
                <td>B: </td>
                <td> <input type="text" /> </td>
            </tr>
        </table>
    </body>
</rml>

The rcss file:

body {
    width: 100%;
    height: 100%;
    font-family: "LatoLatin";
    font-size: 36dp;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: flex-start; */
}

input.text {
    border: 3dp;
}

/*
 * Below are default styles from https://mikke89.github.io/RmlUiDoc/pages/rml/html4_style_sheet.html so I'm omitting it.
 */

The result is correct:

image

But if we add display: flex; to body style, the table columns are overlapped:

image

flex-direction: column; fixes this, but align-items: flex-start; breaks it again.
@mikke89
Copy link
Owner

mikke89 commented Sep 14, 2024

I think what is happening here is due to tables in RmlUi not supporting shrink-to-fit (or fit-content/max-content) width. So when you put a table in such a context (here using a content-based flexbox), the table width is simply set to zero, which gives the above result due to overflow.

Here is a discussion about this, both for flexboxes and tables: #552 (comment)

Note that, since then, support for this has been added to flexboxes (but not tables): #559

@mikke89 mikke89 added duplicate This issue or pull request already exists layout Layout engine issues and enhancements labels Sep 14, 2024
@AmaiKinono AmaiKinono mentioned this issue Sep 17, 2024
Closed
@mikke89 mikke89 removed the duplicate This issue or pull request already exists label Oct 6, 2024
@mikke89
Copy link
Owner

mikke89 commented Oct 6, 2024

I am closing this one to clean up the issues a bit. I think for now, we have documented the behavior better (thanks for the PRs!).

There is still room for some general improvements on the library side, particularly for supporting shrink-to-fit on tables. Maybe, if we actually want that in terms of performance and complexity. But if we do, we should rather open a new focused issue to discuss that in particular.

@mikke89 mikke89 closed this as completed Oct 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
layout Layout engine issues and enhancements
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Compute shrink-to-fit width for tables AmaiKinono/RmlUi
2 participants
@mikke89 @AmaiKinono