# Choice component in one row **URL:** \ **Category:** Ask for Help\ **Created:** [May 1, 2024, 6:39am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970 "2024-05-01T06:39:11Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\ **Post date:** [May 1, 2024, 6:39am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/1 "2024-05-01T06:39:11Z")
Hi Gliders, Need help with CSS to display choice component in a single row rather than in multiple lines: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0dac8812fa35d3f825c301168b885e89a4b93c8b.png) so users can scroll horizonatally and select an option. Thanks in advance! ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [May 1, 2024, 6:46am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/2 "2024-05-01T06:46:49Z")
> **[CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/GRXxaEGjQwWWcTKcb9CbUQ)** ---
**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\ **Post date:** [May 1, 2024, 2:09pm UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/3 "2024-05-01T14:09:30Z")
Thanks, I didn’t know about this library and app! However, it doesn’t really work as expected: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/68999c90ba459c461bf5448d4d16969998103bf6.png) It breaks into 2nd line? ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [May 1, 2024, 4:36pm UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/4 "2024-05-01T16:36:17Z")
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). ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [May 2, 2024, 12:23am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/5 "2024-05-02T00:23:13Z")
```auto .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](https://css-library.glide.page/dl/library/s/8836b3/r/GRXxaEGjQwWWcTKcb9CbUQ). Thanks for reporting @Darko_Vukoje . ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9af279c9f243c74c0a5c583f930f3a64e0524317.png) ---
**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\ **Post date:** [May 2, 2024, 6:27am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/6 "2024-05-02T06:27:47Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/e/fe01d44deca5cce574cd4c492c4901e49636d32d.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1d998b6953495ade224d7c01f74cb251429e87f2.jpeg) It is strange, but it doesn’t work for me. Am I using this correctly? ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 2, 2024, 1:36pm UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/7 "2024-05-02T13:36:57Z")
Ensure that .horizontal-choice [class\*=“StyledUl”] is written in a single line. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [May 6, 2024, 2:40pm UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/8 "2024-05-06T14:40:01Z")
love this. any way to justify the boxes - i.e. equal widths regardless of the text in them? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [May 7, 2024, 12:11am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/9 "2024-05-07T00:11:53Z")
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. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [May 7, 2024, 7:03am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/10 "2024-05-07T07:03:25Z")
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/27a12a471c9e10b44cf7486aa9490620ca26655c.jpeg) ---
**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\ **Post date:** [May 7, 2024, 9:22am UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/11 "2024-05-07T09:22:16Z")
Looks great. Please share the code once you can. Thanks ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [May 8, 2024, 8:59pm UTC](https://community.glideapps.com/t/choice-component-in-one-row/72970/12 "2024-05-08T20:59:50Z")
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); > }