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

Stop using auto-margin to center UI elements in our examples #6498

Closed
Weibye opened this issue Nov 6, 2022 · 0 comments
Closed

Stop using auto-margin to center UI elements in our examples #6498

Weibye opened this issue Nov 6, 2022 · 0 comments
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior C-Code-Quality A section of code that is hard to understand or change C-Examples An addition or correction to our examples D-Trivial Nice and easy! A great choice to get started with Bevy

Comments

@Weibye
Copy link
Contributor

Weibye commented Nov 6, 2022

Bevy version

Current main

Description

At several locations throughout our examples we use the old css-hack of setting margin: auto on an element that should be centered in order to make it center on the screen. This is incorrect and can lead to hard-to-understand behaviour with sibling-nodes.
The correct way to center elements on the page is to set the following properties on the parent node:

  • AlignItems::Center
  • JustifyContent::Center

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#properties_that_control_alignment

We should correct this so that new users of Bevy to learn our tools correctly.

Ref: #5513 (comment)

Suggested fix

  1. Look through all examples for nodes with auto-margin
  2. Determine if they have auto margin in order to achieve centering
  3. If yes, replace it with the correct setup of the parent node (AlignItems::Center, JustifyContent::Center)
@Weibye Weibye added C-Bug An unexpected or incorrect behavior D-Trivial Nice and easy! A great choice to get started with Bevy C-Examples An addition or correction to our examples A-UI Graphical user interfaces, styles, layouts, and widgets C-Code-Quality A section of code that is hard to understand or change labels Nov 6, 2022
@Weibye Weibye changed the title Stop using auto-margin to centering UI elements in our examples Stop using auto-margin to center UI elements in our examples Nov 6, 2022
@Weibye Weibye mentioned this issue Nov 6, 2022
Closed
@garychia garychia mentioned this issue Nov 10, 2022
Closed
@bors bors bot closed this as completed in 585dac0 Nov 21, 2022
taiyoungjang pushed a commit to taiyoungjang/bevy that referenced this issue Dec 15, 2022
@garychia @taiyoungjang
Remove auto-margin properties from the examples (bevyengine#6535)
b5eb147 
# Objective

Fixes bevyengine#6498.

## Solution

Adding a parent node with properties AlignItems::Center and JustifyContent::Center to centered child nodes and removing their auto-margin properties.
alradish pushed a commit to alradish/bevy that referenced this issue Jan 22, 2023
@garychia @alradish
Remove auto-margin properties from the examples (bevyengine#6535)
27447db 
# Objective

Fixes bevyengine#6498.

## Solution

Adding a parent node with properties AlignItems::Center and JustifyContent::Center to centered child nodes and removing their auto-margin properties.
ItsDoot pushed a commit to ItsDoot/bevy that referenced this issue Feb 1, 2023
@garychia @ItsDoot
Remove auto-margin properties from the examples (bevyengine#6535)
b2e1081 
# Objective

Fixes bevyengine#6498.

## Solution

Adding a parent node with properties AlignItems::Center and JustifyContent::Center to centered child nodes and removing their auto-margin properties.
This was referenced Feb 11, 2023
Closed
Closed
bors bot pushed a commit that referenced this issue Feb 11, 2023
@ickshonpe
Fix the Size helper functions using the wrong default value and imp…
eaac730 
…rove the UI examples (#7626)

# Objective
`Size::width` sets the `height` field to `Val::DEFAULT` which is `Val::Undefined`, but the default for `Size` `height` is `Val::Auto`. 
`Size::height` has the same problem, but with the `width` field. 

The UI examples specify numeric values in many places where they could either be elided or replaced by composition of the Flex enum properties.

related: #7468
fixes: #6498

## Solution
Change `Size::width` so it sets `height` to `Val::AUTO` and change `Size::height` so it sets `width` to `Val::AUTO`.
Added some tests so this doesn't happen again.

## Changelog
Changed `Size::width` so it sets the `height` to `Val::AUTO`.
Changed `Size::height` so it sets the `width` to `Val::AUTO`.
Added tests to `geometry.rs` for `Size` and `UiRect` to ensure correct behaviour.
Simplified the UI examples. Replaced numeric values with the Flex property enums or elided them where possible, and removed the remaining use of auto margins.

## Migration Guide
The `Size::width` constructor function now sets the `height` to `Val::Auto` instead of `Val::Undefined`.
The `Size::height` constructor function now sets the `width` to `Val::Auto` instead of `Val::Undefined`.
myreprise1 pushed a commit to myreprise1/bevy that referenced this issue Feb 14, 2023
@ickshonpe @myreprise1
Fix the Size helper functions using the wrong default value and imp…
571660d 
…rove the UI examples (bevyengine#7626)

# Objective
`Size::width` sets the `height` field to `Val::DEFAULT` which is `Val::Undefined`, but the default for `Size` `height` is `Val::Auto`. 
`Size::height` has the same problem, but with the `width` field. 

The UI examples specify numeric values in many places where they could either be elided or replaced by composition of the Flex enum properties.

related: bevyengine#7468
fixes: bevyengine#6498

## Solution
Change `Size::width` so it sets `height` to `Val::AUTO` and change `Size::height` so it sets `width` to `Val::AUTO`.
Added some tests so this doesn't happen again.

## Changelog
Changed `Size::width` so it sets the `height` to `Val::AUTO`.
Changed `Size::height` so it sets the `width` to `Val::AUTO`.
Added tests to `geometry.rs` for `Size` and `UiRect` to ensure correct behaviour.
Simplified the UI examples. Replaced numeric values with the Flex property enums or elided them where possible, and removed the remaining use of auto margins.

## Migration Guide
The `Size::width` constructor function now sets the `height` to `Val::Auto` instead of `Val::Undefined`.
The `Size::height` constructor function now sets the `width` to `Val::Auto` instead of `Val::Undefined`.
myreprise1 pushed a commit to myreprise1/bevy that referenced this issue Feb 15, 2023
@ickshonpe @myreprise1
Fix the Size helper functions using the wrong default value and imp…
c31a5b3 
…rove the UI examples (bevyengine#7626)

# Objective
`Size::width` sets the `height` field to `Val::DEFAULT` which is `Val::Undefined`, but the default for `Size` `height` is `Val::Auto`. 
`Size::height` has the same problem, but with the `width` field. 

The UI examples specify numeric values in many places where they could either be elided or replaced by composition of the Flex enum properties.

related: bevyengine#7468
fixes: bevyengine#6498

## Solution
Change `Size::width` so it sets `height` to `Val::AUTO` and change `Size::height` so it sets `width` to `Val::AUTO`.
Added some tests so this doesn't happen again.

## Changelog
Changed `Size::width` so it sets the `height` to `Val::AUTO`.
Changed `Size::height` so it sets the `width` to `Val::AUTO`.
Added tests to `geometry.rs` for `Size` and `UiRect` to ensure correct behaviour.
Simplified the UI examples. Replaced numeric values with the Flex property enums or elided them where possible, and removed the remaining use of auto margins.

## Migration Guide
The `Size::width` constructor function now sets the `height` to `Val::Auto` instead of `Val::Undefined`.
The `Size::height` constructor function now sets the `width` to `Val::Auto` instead of `Val::Undefined`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior C-Code-Quality A section of code that is hard to understand or change C-Examples An addition or correction to our examples D-Trivial Nice and easy! A great choice to get started with Bevy
Projects
None yet
Milestone
No milestone
1 participant
@Weibye