forestia/bevy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix button placement in split_screen example (#14405)

Browse Source 
# Objective

Fixes the buttons in `split_screen` touching the edge of the viewport.

## Solution

This seems like it might potentially be "normal css-like" behavior with
absolutely positioned nodes and padding.
<details>
<summary>HTML test</summary>

```html
<html>
<body>
    <div style="width: 100%; height: 100%; padding: 20px;">
        <div style="width: 100%; height: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center">
            <div style="width: 40px; height: 40px; border: 1px solid black;">&lt;</div>
            <div style="width: 40px; height: 40px; border: 1px solid black;">&gt;</div>
        </div>
    </div>
</body>
</html>
```

</details>

Instead I just removed the padding from the root node.

## Testing

Added ui debug gizmos to the example and checked before/after.

Before:
<img width="1280" alt="Screenshot 2024-07-20 at 9 23 09 AM"
src="https://github.com/user-attachments/assets/f3cac637-8de9-4acf-bb13-994791998bb7">

After:
<img width="1280" alt="Screenshot 2024-07-20 at 9 37 27 AM"
src="https://github.com/user-attachments/assets/4d3c23b4-5a48-45da-b8a5-a394fd34a44b">
This commit is contained in:
Rob Parrett 2024-07-20 10:17:14 -07:00 committed by GitHub
parent 11ecc4d322
commit 7fb927f725
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/3d/split_screen.rs
View File

@ -86,14 +86,22 @@ fn setup(
style: Style {
width: Val::Percent(100.),
height: Val::Percent(100.),
padding: UiRect::all(Val::Px(20.)),
..default()
},
..default()
},
))
.with_children(|parent| {
parent.spawn(TextBundle::from_section(*camera_name, TextStyle::default()));
parent.spawn(
TextBundle::from_section(*camera_name, TextStyle::default()).with_style(
Style {
position_type: PositionType::Absolute,
top: Val::Px(12.),
left: Val::Px(12.),
..default()
},
),
);
buttons_panel(parent);
});
}