Choice component in one row

Ask for Help
1

Hi Gliders,

Need help with CSS to display choice component in a single row rather than in multiple lines:

image
image722Ă—214 31.4 KB

so users can scroll horizonatally and select an option.

Thanks in advance!

2
3

Thanks, I didn’t know about this library and app!

However, it doesn’t really work as expected:

image
image752Ă—164 19.7 KB

It breaks into 2nd line?

4

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).

5 
.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 .

image

6

image
image720Ă—892 51.5 KB

image
image2082Ă—704 70.7 KB

It is strange, but it doesn’t work for me. Am I using this correctly?

7

Ensure that .horizontal-choice [class*=“StyledUl”] is written in a single line.

8

love this. any way to justify the boxes - i.e. equal widths regardless of the text in them?

9

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.

10

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

IMG_3580
IMG_35801170Ă—1081 105 KB

11

Looks great. Please share the code once you can. Thanks

12

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);
}