-
Hi, I want to list 4 items in Horizontal:
When the parent width is small, I do not want it to scroll, is there a way to make it
Or even better:
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 7 replies
-
Currently we don't have a |
Beta Was this translation helpful? Give feedback.
-
The grid layout I think might get you close?
|
Beta Was this translation helpful? Give feedback.
-
If this discussion is still relevant I seem to have found a nice CSS-ish way to do sort of responsive design which feels very natural:
WIDTH_BREAKPOINS = {
64: "breakpoint-sm",
128: "breakpoint-md",
192: "breakpoint-lg",
def on_resize(self, event: Resize):
print("resize:", event)
_ = [self.query().remove_class(cls) for cls in self.WIDTH_BREAKPOINS.values()]
keys = sorted(self.WIDTH_BREAKPOINS.keys(), reverse=True)
for k in keys:
if event.size.width > k:
self.query().add_class(self.WIDTH_BREAKPOINS[k])
break basically here I set breakpoint related class based on width Grid {
width: 100%;
height: 1fr;
# height: auto;
# max-width: 200;
grid-size: 3;
border: solid red;
grid-gutter: 0;
&.breakpoint-sm { grid-size: 1; }
&.breakpoint-md { grid-size: 2; }
&.breakpoint-lg { grid-size: 3; }
.box-hdr {
height: 100%;
border: solid green;
width: auto;
min-width: 48;
max-width: 200;
&.breakpoint-sm { column-span: 1; row-span:1 }
&.breakpoint-md { column-span: 1; row-span:20 }
&.breakpoint-lg { column-span: 3; row-span:1 }
}
} What id does for different screen sizes:
Sorry, I just prototyped it and code is not most effective, I can refine it later and post full working example if anyone is interested. Also maybe someone here is more experienced than me (I'm very inexperienced :-) ) and can suggest improvements or develop this concept even further. Update: Layout is pretty straightforward, I forgot to post it initially: def compose(self) -> ComposeResult:
with Horizontal():
with Grid():
yield Static("header content, " * 20, id="hdr", classes="box-hdr")
yield Static("123456789_" * 8, classes="box")
yield Static("Two", classes="box")
yield Static("Three", classes="box")
yield Static("Four", classes="box")
yield Static("Five", classes="box")
yield Static("Six", classes="box") |
Beta Was this translation helpful? Give feedback.
Currently we don't have a
layout
option that works that way, although it's something we'd like to add.