How to achieve a centered grid layout with rows that are left-aligned? #854
-
|
I'm trying to implement a grid layout, but it ends up aligned to the top-left corner:
I would like it centered (horizontally) in the window instead. I've tried wrapping the grid in another element like so: rect {
width: "100%",
height: "100%",
direction: "vertical",
cross_align: "center",
...my grid element...
}But this doesn't seem to do anything. Here's the full code. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
hey! You were very close. You just need to remove the 100% width and 100% height from the second rect. This way the inner rect will not be expanded to its parent size and instead will be shrinked to its children size, and thus it will be centered. 🔴 rsx!(
rect {
width: "100%",
height: "100%",
direction: "vertical",
cross_align: "center",
rect {
width: "100%",
height: "100%",
// Children are rows.
direction: "vertical",
main_align: "start",
cross_align: "start",✅ rsx!(
rect {
width: "100%",
height: "100%",
direction: "vertical",
cross_align: "center",
rect {
// Children are rows.
direction: "vertical", // You can remove this btw, it is the default value
main_align: "start", // Same for this
cross_align: "start", // Same for this
|
Beta Was this translation helpful? Give feedback.
-
|
hey again, I think I should make ScrollView somehow more flexible to make it shrink to its inner elements. For now could you try specifying a fixed width for now? rsx!(
rect {
width: "100%",
height: "100%",
direction: "vertical",
cross_align: "center",
ScrollView {
theme: theme_with!(ScrollViewTheme {
width: "1500".into()
}),
for (n_row, row) in grid.read().rows.iter().enumerate() { |
Beta Was this translation helpful? Give feedback.
-
|
I got some ideas but I need time to work on it, will update when I have something. #857 |
Beta Was this translation helpful? Give feedback.
-
|
OK thanks Marc. I'll subscribe to that issue and just leave a comment in my code for now. |
Beta Was this translation helpful? Give feedback.
-
|
hey! Sorry, you may not be able to center a ScrollView yet but you can definitely center its content: rsx!(
ScrollView {
rect {
width: "100%",
direction: "vertical",
cross_align: "center",
for (n_row, row) in grid.read().rows.iter().enumerate() { |
Beta Was this translation helpful? Give feedback.
-
|
Just opened #858 ! You should now be able to specify a rsx!(
rect {
width: "100%",
height: "100%",
direction: "vertical",
cross_align: "center",
ScrollView {
width: "auto",
for (n_row, row) in grid.read().rows.iter().enumerate() { |
Beta Was this translation helpful? Give feedback.
hey! You were very close.
You just need to remove the 100% width and 100% height from the second rect. This way the inner rect will not be expanded to its parent size and instead will be shrinked to its children size, and thus it will be centered.
🔴
✅