search

getkirby / kirby

Kirby's core application folder
https://getkirby.com
Other
1.31k stars 168 forks source link

Radio Field: Container Queries not optimally #6239

Closed Werbschaft closed 8 months ago

Werbschaft commented 9 months ago

In my opinion, the container queries do not react optimally for the radio field. It is almost impossible to display the radios next to each other. See the video. There are radios on the right side and on the left side as well. It is a layout with 1/3 and 2/3 division. But this also happens with other layouts. I'm working on a Mac Studio Display.

https://github.com/getkirby/kirby/assets/2178466/29254cf2-e3a7-486d-9482-cc2f7ff324d5

distantnative commented 9 months ago

It is almost impossible to display the radios next to each other. See the video.

I don't quite understand... in your video they are at times side by side, in narrower views above/below each other. Why you think it's almost impossible?

Werbschaft commented 9 months ago

I also have a very large screen. I just generally find that they start to stack on top of each other very early on. Or, for example, if you place radios in the drawer with a 1/2 and 1/2 layout, they are also underneath each other. In Kirby 3 the breakpoints were better chosen, at least in my eyes. Of course it's not really a problem, currently I switch to toggles to prevent this.

Bildschirmfoto 2024-02-02 um 17 26 25
gbdesign2023 commented 9 months ago

I would like to share my thoughts on this: Someone who has very long label descriptions would realize that the jump is too early and wish there was no changeover. The fact that the change occurs earlier in the left 2/3 section is most likely due to the space between both radio fields. That space is missing on the right in the 1/3 section. It will be difficult to achieve a balanced ratio in a responsive layout that may cover many requirements.

bastianallgeier commented 8 months ago

I think I agree with @gbdesign2023 after looking at this again. We can never make everyone happy with this. The only option to optimize this perfectly for the content is with custom styles depending on the field name.