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 expanding width to edge #577

Closed
Paril opened this issue Jan 18, 2024 · 2 comments
Closed

Flex expanding width to edge #577

Paril opened this issue Jan 18, 2024 · 2 comments
Labels
layout Layout engine issues and enhancements

Comments

@Paril
Copy link
Contributor

Paril commented Jan 18, 2024 •
edited
Loading

I'm not sure how to describe this issue, but, here's the full rml & rcss to reproduce it:

*
{
	box-sizing: border-box;
}

div
{
	display: block;
}

body
{
	width: 100%;
	height: 100%;
	font-family: Lithos;
	font-weight: normal;
	font-style: normal;
	font-size: 15dp;
	color: white;
}

span
{
	display: inline;
}

img
{
	display: inline-block;
}

body .control_box
{
	background: rgba(255, 0, 0, 64);
	padding: 1em 2em;
	/*display: flex;*/
}

body .control_box > .control
{
	display: inline-flex;
	/*align-items: center;
	justify-content: center;*/

}

body .control_box > .control > img
{
	width: 24dp;
	height: 24dp;
}

<rml>
	<head>
		<link type="text/rcss" href="control_box.rcss" />
	</head>
	<body>
		<div class='control_box'>
			<div class='control'>
				<img src="/gfx/controller/keyboard/287.png" />
				<span>$m_select_item</span>
			</div>
			<div class='control'>
				<img src="/gfx/controller/keyboard/27.png" />
				<span>$m_back_menu</span>
			</div>
		</div>
	</body>
</rml>

In RmlUi, the inner .control elements are stretched all the way to fill the outer container; they should be fitting their content tightly. If you use the same css in an HTML layout engine, the results are as expected:

However, this is the result I'm getting - I mimicked the result by adding width: 100%; on .control:

Is this related to the "improved shrink to fit" PR, or is this a different issue entirely?

If I use the Rml::Debugger, the values are correct for the two inner elements (width 24px for img, ~130px for the text), but the width of the .control always ends up being 1620px.

Using inline-block instead of inline-flex also fixes it, but I wanted to use flex for the inner elements of the block.
@Paril
Copy link
Contributor Author

Paril commented Jan 18, 2024 •
edited
Loading

I confirmed that #559 doesn't fix this use-case, so I'm not sure if this is just an unrelated bug or if I've set something wrong... it seems to be specific to inline-flex, though. It always wants to fill the entire parent.

@Paril
Copy link
Contributor Author

Paril commented Jan 18, 2024 •
edited
Loading

Ah, I just spotted what I was missing from the docs:

In RCSS, inline-flex boxes are required to have their widths set to a definite (non-auto) value.

That would do it, and is quite problematic here since I don't know how long the text is going to be (localization, etc). Is this effectively what shrink-to-fit addresses?

EDIT2: Removing Style::Display::InlineTable from the check in GetShrinkToFitWidth and adding it here:

		// Apply the shrink-to-fit algorithm here to find the width of the element.
		// See CSS 2.1 section 10.3.7 for when this should be applied.
		const bool shrink_to_fit = !replaced_element &&
			((computed.float_() != Style::Float::None) || (absolutely_positioned && inset_auto) ||
				(computed.display() == Style::Display::InlineBlock || computed.display() == Style::Display::InlineFlex));

seems to enable this to work as I expect, but it certainly can't be that simple and probably breaks other things...

@Paril Paril mentioned this issue Jan 18, 2024
Merged
@Paril Paril closed this as completed Jan 18, 2024
@mikke89 mikke89 added the layout Layout engine issues and enhancements label Jan 21, 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

No branches or pull requests
2 participants
@Paril @mikke89