Hi Gliders,
Need help with CSS to display choice component in a single row rather than in multiple lines:
so users can scroll horizonatally and select an option.
Thanks in advance!
Hi Gliders,
Need help with CSS to display choice component in a single row rather than in multiple lines:
so users can scroll horizonatally and select an option.
Thanks in advance!
Thanks, I didn’t know about this library and app!
However, it doesn’t really work as expected:
If you add a comment in the Library, one of the contributors might help you fix that. (CSS is not something I’m good at).
.horizontal-choice [class*="StyledUl"] {
flex-wrap: nowrap !important;
position: relative;
overflow: auto;
}
.horizontal-choice li {
white-space: nowrap;
min-width: fit-content;
}
Fixed and pushed the code to be the new solution. Thanks for reporting @Darko_Vukoje .
Ensure that .horizontal-choice [class*=“StyledUl”] is written in a single line.
love this. any way to justify the boxes - i.e. equal widths regardless of the text in them?
Why would you want that though? Just for consistency? I imagine it would look weird when you have to cater to the longest choice, and there’s extra space on shorter choices.
I just think it looks better in some new cases where you have four roughly equal words to justify the boxes. You are rated does start to look a bit weird when you have One long word and three shorter ones, for example
I think I figured this out, see screenshot.
Will post code later
Looks great. Please share the code once you can. Thanks
here ya go
.library-view {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0 -5px; /* Adjust the margin as needed */}
.library-view li {
border-radius: 0px;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: none;
background-color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 1);
width: calc(25% - 20px); /* Adjust the width calculation /
margin-right: 10px; / Adjust the spacing between buttons */
}.library-view li:last-child {
margin-right: -10px; /* Remove margin from last button /
width: calc(25% - 10px); / Adjust the width calculation */
}.library-view li.selected, .library-view:not(:has(.selected)) li:first-child {
font-weight: 900;
background-color: rgba(0, 102, 255, 0.5);
color: rgba(255, 255, 255, 1);
border-bottom: 3px solid rgba(255, 0, 102, 1);
}