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

TranslateX doesn't change the div width #652

Closed
Lyuu17 opened this issue Aug 12, 2024 · 3 comments
Closed

TranslateX doesn't change the div width #652

Lyuu17 opened this issue Aug 12, 2024 · 3 comments

Comments

@Lyuu17
Copy link

Lyuu17 commented Aug 12, 2024

I picked one table sample and I'm modifying to look like a scoreboard, centering in the middle of the screen

<rml>

    <head>
        <style>
            body {
                font-family: Source Sans Pro;
                font-weight: normal;
                font-style: normal;
                font-size: 14dp;
                overflow: auto;
            }

            table {
                height: 100%;
                width: 300px;
                color: black;
                margin: 2em 0;
                border: 2dp #666;
                gap: 5dp;
                text-align: center;
            }

            td {
                background: #bbb;
                vertical-align: middle;
                padding: 5dp;
            }

            table {
                box-sizing: border-box;
                display: table;
            }

            tr {
                box-sizing: border-box;
                display: table-row;
            }

            td {
                box-sizing: border-box;
                display: table-cell;
            }

            col {
                box-sizing: border-box;
                display: table-column;
            }

            colgroup {
                display: table-column-group;
            }

            thead,
            tbody,
            tfoot {
                display: table-row-group;
            }

            .scoreboard {
                position: relative; 
                left: 50%;
                transform: translateX(-50%);
            }
        </style>
    </head>

    <body>
        <table class="scoreboard">
            <tr>
                <td style="width: 50dp">A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td style="width: 50dp">E</td>
            </tr>
            <tr>
                <td style="width: 50dp">A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td style="width: 50dp">E</td>
            </tr>
        </table>
    </body>
</rml>

Result:

image
@mikke89
Copy link
Owner

mikke89 commented Aug 12, 2024

Hey there. I'm trying to understand what you expect to happen in this situation, can you elaborate?

The result looks as I would expect here. Transforms should not affect the width of parent elements, and neither should positioned elements. I believe this behavior is the same as in CSS.

By the way, the idiomatic way in RmlUi to center elements is to use margin: 0 auto. This has the advantage that it is determined at the layout stage, so you get the benefit of pixel-aligned boxes and textures. On the other hand, transforms are done at the rendering stage, with possibly subpixel positioning, which can lead to slightly blurred text and textures. This approach also works better with clipping in our library.

@Lyuu17
Copy link
Author

Lyuu17 commented Aug 12, 2024

Hey there. I'm trying to understand what you expect to happen in this situation, can you elaborate?

left: -50%; transform: translateX(50%); is supposed to center horizontally the div (at least what it says in here: https://stackoverflow.com/questions/25982135/why-does-left-50-transform-translatex-50-horizontally-center-an-element)

The result looks as I would expect here. Transforms should not affect the width of parent elements, and neither should positioned elements. I believe this behavior is the same as in CSS.

yeah, sorry, i'm bad for titles

By the way, the idiomatic way in RmlUi to center elements is to use margin: 0 auto. This has the advantage that it is determined at the layout stage, so you get the benefit of pixel-aligned boxes and textures. On the other hand, transforms are done at the rendering stage, with possibly subpixel positioning, which can lead to slightly blurred text and textures. This approach also works better with clipping in our library.

The thing is, I don't want to use the whole screen for the document so I wanted to use position: absolute but I guess this is easier and less headache

@Lyuu17 Lyuu17 closed this as completed Aug 15, 2024
@mikke89
Copy link
Owner

mikke89 commented Aug 15, 2024

By the way, make sure to give body a width. Otherwise, there is nothing to compute percentages relative to, so they will resolve to zero. For me, it works perfectly fine to center it with the way you mention here, after setting width: 100% on the body. If you have any issues, try to test with the latest master branch, as there are several layout changes since RmlUi 5.1.

The thing is, I don't want to use the whole screen for the document so I wanted to use position: absolute but I guess this is easier and less headache

You can use margin: auto with position: absolute to center the element (at least if the sizes are fixed).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mikke89 @Lyuu17