# 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:** 7

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [October 10, 2020, 3:25am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/121 "2020-10-10T03:25:27Z")

</div>

this worked, but not now 😕

---

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [October 10, 2020, 3:26am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/122 "2020-10-10T03:26:40Z")

</div>

x2

---

<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 13, 2020, 4:26am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/123 "2020-10-13T04:26:30Z")

</div>

@Lucas_Pires @Robert_Petitto Any of you guys managed to wrap the text into another line?

I have tried a lot of things for white-space and overflow etc., I’m sure it’s possible because I managed to do it once this morning but then I accidentally refreshed the tab and can’t replicate ☹

![ezgif-7-04b6b1de4d64](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/3b8ebe94e476135b218b5c0baf8dbf240e2cf17e.gif)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 13, 2020, 4:57am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/124 "2020-10-13T04:57:59Z")

</div>

Well, never tried but

Try to use

```
word-wrap: break-word;
display: table-cell;
```

---

<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 13, 2020, 7:48am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/125 "2020-10-13T07:48:07Z")

</div>

Still doesn’t work unfortunately.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/e/e21671c4b4c55e46bd191b973512dc637bef801a.jpeg)

My code is:

```
<pre><span><style>
[data-test="app-inline-picker"]{
Padding: 1px 5px;
}
.bcpZau .ips-inner {
background-color: white;
height: 50px;
}
[data-test="app-inline-picker-item"]
{
margin: 0 2px;
max-width: 200px;
}
.dtqldq {
font-size: smaller;
color: white;
background-color: black;
border-radius: 30px;
white-space: normal;
word-wrap: break-word;
display: table-cell;
}
.hlENJv {
font-size: smaller;
color: black;
background-color: #F08F00;
border-radius: 30px;
word-wrap: break-word;
display: table-cell;
}
.hCgtfM .card-header {
color: black;
font-weight: bold;
background-color: orange;
max-width: fit-content;
border-radius: 5px;
}
</style></span></pre>
```

---

<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 13, 2020, 10:01am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/126 "2020-10-13T10:01:35Z")

</div>

Inspired by @Lucas_Pires.

[https://streamable.com/ev4c2g](https://streamable.com/ev4c2g)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 13, 2020, 11:02am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/127 "2020-10-13T11:02:16Z")

</div>

That’s amazing @ThinhDinh!!

---

<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 13, 2020, 11:14am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/128 "2020-10-13T11:14:00Z")

</div>

Thank you bro, if I find a way to wrap the text I’ll let you know. Have a nice day!

---

<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 13, 2020, 11:34am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/129 "2020-10-13T11:34:49Z")

</div>

Wrap the text within a choice button?

---

<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 13, 2020, 11:46am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/130 "2020-10-13T11:46:22Z")

</div>

Yup, I tried a lot of settings but can’t get it.

---

<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 13, 2020, 2:51pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/131 "2020-10-13T14:51:14Z")

</div>

Add this?

```auto
.bghTgA > * {
    white-space: pre-line;
}

```

---

<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 15, 2020, 4:05pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/132 "2020-10-15T16:05:12Z")

</div>

Sorry for getting back too late on this but the pre-line doesn’t work as well. Probably there are some conflicting settings in my code, if I find out a way I’ll tell you guys. Thanks a lot and have a nice day!

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [October 16, 2020, 1:12pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/133 "2020-10-16T13:12:24Z")

</div>

Brilliant

---

<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 23, 2020, 2:37am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/134 "2020-10-23T02:37:01Z")

</div>

I found the way to break to new lines.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/5/56218fc8fa25ad09abe18f2cfc9fced56350826a.jpeg)

In my case the “with asterisk” part controls the line break, I did not realize that when I first made this.

```
.btCksO{
font-size: smaller;
color: white;
background-color: black;
border-radius: 30px;
white-space: break-spaces;
}
.eaZLSn {
font-size: smaller;
color: black;
background-color: #F08F00;
border-radius: 30px;
}
.btCksO >* {
white-space: break-spaces;
}
.eaZLSn >* {
white-space: break-spaces;
}
```

---

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [October 23, 2020, 5:03am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/135 "2020-10-23T05:03:13Z")

</div>

What kind of control is?

---

<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 23, 2020, 5:12am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/136 "2020-10-23T05:12:21Z")

</div>

I mean it’s the same class name but only the specific with asterisk part can break the text to new lines.

---

<div class="post-metadata">

**Author:** ![11145](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11145/32/15195_2.png) [@11145](https://community.glideapps.com/u/11145)\
**Post date:** [October 27, 2020, 8:54am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/137 "2020-10-27T08:54:08Z")

</div>

Hi,Pratik! Is this button working properly now?

---

<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 27, 2020, 11:43am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/138 "2020-10-27T11:43:33Z")

</div>

No, it is not working with this code as of now.

---

<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 28, 2020, 11:59pm UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/139 "2020-10-28T23:59:47Z")

</div>

To continue this thread, I tried my hands on a new way to make a ratings form look nicer.

It involves:

- Blurring the top navigation bar (credit to @Lucas_Pires)
- Customizing the choice component (thanks to @Robert_Petitto)
- Conditional visibility for GIFs and full screen colors (using images generated from dummyimage and the CSS full screen code by Lucas)

---

<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 29, 2020, 12:20am UTC](https://community.glideapps.com/t/multirow-choice-component-aka-chips-ui/16437/140 "2020-10-29T00:20:14Z")

</div>

Beautiful!

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

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