# Choice Components Side by Side? (with pic) **URL:** \ **Category:** Ask for Help\ **Created:** [May 15, 2023, 3:57am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765 "2023-05-15T03:57:05Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\ **Post date:** [May 15, 2023, 3:57am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/1 "2023-05-15T03:57:05Z")
![CHOICECOMP2023-05-14_23-49-08](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/d/ad4b9c2563926cc2362168a21366f39390ae75fe.jpeg) Hello! Trying to get two choice buttons to be side by side. How can I make that happen? Thanks! ---
**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 15, 2023, 4:56am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/2 "2023-05-15T04:56:21Z")
In desktop mode you can use a two column container, but they would still stack up in mobile view. I’m not aware of any way to do that in mobile view. ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [May 15, 2023, 11:52am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/3 "2023-05-15T11:52:58Z")
For mobile layout what you could do is use a custom collection on top of a 2 row helper table. Label the rows in the helper table row 1 and row 2 and add two choice components inside your custom collection. On the first choice component apply the visibility condition when` helper table row -> equals -> 1`… and for the second… when `helper table row -> equals -> 2` Here is an example where I used this method with date pickers on mobile. ![IMG_3388](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c4c92f8a577d0f5b093bda76dcec8f455ab88bd0.jpeg) ---
**Author:** ![RagnarLagerta](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ragnarlagerta/32/40388_2.png) [@RagnarLagerta](https://community.glideapps.com/u/RagnarLagerta)\ **Post date:** [May 15, 2023, 5:44pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/4 "2023-05-15T17:44:44Z")
Bonjour, Pouvez-vous préciser ou trouve-t-on une table d’assistance à 2 lignes svp?? Et comment étiqueter les lignes de la table d’assistance svp? Merci beaucoup ---
**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 15, 2023, 11:52pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/5 "2023-05-15T23:52:44Z")
Nice workaround. Thanks for sharing! ---
**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\ **Post date:** [June 23, 2023, 2:42am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/6 "2023-06-23T02:42:30Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/2/b2bfd88d0fe87cea3c15435eb5abed82da5826cf.jpeg) Hello! Any idea what I’m missing here? Still can’t figure out how to get both of these choices on the same row. Thoughts? Thanks ---
**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:** [June 23, 2023, 2:44am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/7 "2023-06-23T02:44:24Z")
You’ve got both components in the left hand column. Drag one of them down to where it says “+ Insert Component” ---
**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\ **Post date:** [June 23, 2023, 3:58am UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/8 "2023-06-23T03:58:56Z")
Thank you for that. Truly appreciate the help! ---
**Author:** ![garywgrimes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garywgrimes/32/66490_2.png) [@garywgrimes](https://community.glideapps.com/u/garywgrimes)\ **Post date:** [November 15, 2023, 2:42pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/9 "2023-11-15T14:42:32Z")
Could you possibly attach the screen(s) showing your configs for this setup? Afraid I’m not following when you say ‘helper table row’ ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [November 15, 2023, 2:48pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/10 "2023-11-15T14:48:57Z")
Create a new table with exactly 2 rows (helper table) Add a basic column in the new table (let’s call it ID) and put 1 in the first row and 2 in the second row. Add a custom collection (Layout Grid - Size Medium) to your screen where the Source of the custom collection is the new 2 row table. Put two choice components inside the custom collection… set the visibility condition of the first component when column ID = 1. And for the second component when column ID = 2. FYI this trick doesn’t work with all components… but it works well with date picker, choice, and big numbers to name a few. ---
**Author:** ![garywgrimes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garywgrimes/32/66490_2.png) [@garywgrimes](https://community.glideapps.com/u/garywgrimes)\ **Post date:** [November 15, 2023, 6:37pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/11 "2023-11-15T18:37:31Z")
Thanks so much for quick response, Eric! Pardon my density. Maybe I’m running into an example where it doesn’t work for image components. That said, I can’t seem to make it work with any kind of component (you see I’m testing with both image and text components. 1. I’ve set up the 2-row, 1-column helper table (see attached) 2. I’ve set up the Layout Grid at Size Medium (see attached) 3. I’ve set the visibility as described. But seems I’m still missing some steps? ![Screenshot 2023-11-15 at 1.35.31 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/24a83c0b34121fe99ba6859ef85629384b6d0987.jpeg) ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [November 15, 2023, 6:49pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/12 "2023-11-15T18:49:45Z")
Ya my trick doesn’t work with those components and is a workaround specifically for mobile view. I see three rows in your helper table (possibly more)… you need exactly two rows… no more no less. I also see the desktop view in your screenshot… for that your destiny is easy. Start over and add a container to your screen. choose a layout design with multiple sections. Add components to them. That should do it 😉 ![Screenshot 2023-11-15 at 1.48.27 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e38ff8160f62102627365681bcf8169bceeb0ef0.png) ---
**Author:** ![garywgrimes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garywgrimes/32/66490_2.png) [@garywgrimes](https://community.glideapps.com/u/garywgrimes)\ **Post date:** [November 15, 2023, 7:03pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/13 "2023-11-15T19:03:55Z")
Sorry for the confusion; I attached an image with the desktop preview above. Here’s the mobile preview now below. My hurdle is getting two images to appear side-by-side on mobile. I would like to force them to be side-by-side somehow with other components (buttons) underneath each. I can easily achieve this on desktop like so ([T-Shirt Bowl - How to beat your friends, fantasy and sportsbooks](https://tshirt-bowl.glide.page/dl/783bbb/s/6a0d35/r/xtGYLxX.TIKzi01jNBBqKA)), but I cannot figure out how to force a two-column layout on mobile without the columns stacking responsively by default. ![Screenshot 2023-11-15 at 1.58.53 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d20f999c46659612cdaea89b4f9d58f847143d77.jpeg) ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [November 15, 2023, 8:19pm UTC](https://community.glideapps.com/t/choice-components-side-by-side-with-pic/61765/14 "2023-11-15T20:19:41Z")
Your custom helper table needs exactly two rows… it has more. One way you could put an image in row 1 and an image in row 2 and add normal collection - style Grid ![Screenshot 2023-11-15 at 3.15.49 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/1030a81d150f2cf3fa46fa24a218c0fbe1948dae.png)