# Multirow Choice Component (aka Chips UI)

**URL:** <https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437>\
**Category:** Feature Requests\
**Created:** [September 28, 2020, 3:24am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437 "2020-09-28T03:24:24Z")\
**Posts on this page:** 20\
**Page:** 6

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 3:05pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/101 "2020-10-02T15:05:43Z")

</div>

Right now, I’m just playing around so no specific action has been added.

---

<div class="post-metadata">

**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:** [October 2, 2020, 3:06pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/102 "2020-10-02T15:06:04Z")

</div>

For my experience, it works in the Editor and on my Mac’s chrome but it still separates into 2 rows on my Safari.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 3:06pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/103 "2020-10-02T15:06:16Z")

</div>

Oh great!!!

---

<div class="post-metadata">

**Author:** ![Danilo\_Arruda\_Felipe](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danilo_arruda_felipe/32/6856_2.png) [@Danilo\_Arruda\_Felipe](https://community.glideapps.com/u/Danilo_Arruda_Felipe)\
**Post date:** [October 2, 2020, 3:06pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/104 "2020-10-02T15:06:59Z")

</div>

Acontece a mesma coisa comigo.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 3:12pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/105 "2020-10-02T15:12:13Z")

</div>

It works well when opened on chrome. 🤦🏿‍♂️

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 2, 2020, 3:13pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/106 "2020-10-02T15:13:16Z")

</div>

Make this adjustment:

```auto
.gbJqOE,.dEHvyM {
display: unset;
}

```

The second class (.dEHvyM) targets Safari.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 3:15pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/107 "2020-10-02T15:15:58Z")

</div>

I opened both the editor and the app on/in chrome and I see it works.

Thanks!

If you don’t mind my asking. What’s the code you’re using to put those two inline lists side-by-side? Or at least point me to where I can find them.

Thanks

---

<div class="post-metadata">

**Author:** ![Joao\_Paulo\_Lima](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joao_paulo_lima/32/12256_2.png) [@Joao\_Paulo\_Lima](https://community.glideapps.com/u/Joao_Paulo_Lima)\
**Post date:** [October 2, 2020, 3:20pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/108 "2020-10-02T15:20:56Z")

</div>

> [@Robert\_Petitto](#):
>
> .dEHvyM

👍 👍 👍

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 2, 2020, 3:21pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/109 "2020-10-02T15:21:22Z")

</div>

Wait. Even better. Try this—may account for all browsers:

```auto
<pre><span><style>
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 10px;
}
.eEPsye div:nth-child(1) {
display: block;
}
</style></span></pre>

```

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 3:27pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/110 "2020-10-02T15:27:47Z")

</div>

It seems to work but I can’t make them look even.

Any ideas?

 ![Screen Shot 2020-10-02 at 10.26.34 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/13d313e9d252e74a674acab4af05b4970943f1a7.png)

This is how it looks on the actual app.

 ![Screen Shot 2020-10-02 at 10.30.31 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/6/65d0b9e2c85b907a868752ed23b1cef566680bc2.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 2, 2020, 3:36pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/111 "2020-10-02T15:36:42Z")

</div>

what happens if you change “unset” to ~~“unblock”~~

EDIT: `block` not “unblock”

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 2, 2020, 3:40pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/112 "2020-10-02T15:40:47Z")

</div>

It fixes it.

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![John\_Cabrera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/john_cabrera/32/2066_2.png) [@John\_Cabrera](https://community.glideapps.com/u/John_Cabrera)\
**Post date:** [October 2, 2020, 9:51pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/113 "2020-10-02T21:51:07Z")

</div>

I was going to suggest nth-child to forgo those weird class names altogether. Aren’t they all just children of data-test (which I agree is the least likely of those to change)?

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [October 3, 2020, 1:37pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/114 "2020-10-03T13:37:29Z")

</div>

Hi @Robert_Petitto,

I am still not able to get the correct output using this code. Can you please help me to know if I am doing something wrong?

Android View:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/6/65c7b8fb087dad7a399e265e52accd84d1022d9a.png)

iOS View is working perfectly.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/b/bf4d79e42bd5aa149ae4c10f81d16aea5855a7ea.png)

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 3, 2020, 1:40pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/115 "2020-10-03T13:40:23Z")

</div>

Hey @Pratik_Shah Try using this code

That one works well on both. It will look weird on the Editor but nice on the actual apps.

> [@Robert\_Petitto](#):
>
> ```auto
> <pre><span><style>
> .ekttti {
> width: 50%;
> float: left;
> }
> [data-test="app-button-view"] {
> margin: 10px;
> }
> .eEPsye div:nth-child(1) {
> display: block;
> }
> </style></span></pre>
> 
> ```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 3, 2020, 1:41pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/116 "2020-10-03T13:41:28Z")

</div>

Hm. Haven’t tested the code with android view. I’ll bookmark this for later.

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [October 3, 2020, 2:04pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/117 "2020-10-03T14:04:48Z")

</div>

Thanks @SantiagoPerez I tried but not working on Android (both in editor and app)  
I hope @Robert_Petitto can help me out

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 4, 2020, 3:58am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/118 "2020-10-04T03:58:34Z")

</div>

Try this:

```auto
<pre><span><style>
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 10px;
}
.eEPsye div:nth-child(1), .eEPszt div:nth-child(1) {
display: block;
}
</style></span></pre>

```

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 4, 2020, 6:51am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/119 "2020-10-04T06:51:00Z")

</div>

I get the same result.  
when on the editor the buttons appear next to each other but on the published app they appear one on top the other,  
tried changing the width and borders with no luck.

couldn’t make it work

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [October 4, 2020, 7:24am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/120 "2020-10-04T07:24:21Z")

</div>

Thanks @Robert_Petitto That worked perfectly on both OS. Thank you so much.

iOS View:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/7a3044b4898f3b7b1cc561a2981f9b03de307cd1.png)

Android View:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/1cf0bfed4036ab334459af96d4b1b6a9dfea478d.png)

[Previous page](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437.md?page=5)

[Next page](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437.md?page=7)