Multirow Choice Component (aka Chips UI)

this worked, but not now :confused:

x2

@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 :frowning:

ezgif-7-04b6b1de4d64

1 Like

Well, never tried but

Try to use

word-wrap: break-word;
display: table-cell;
1 Like

Still doesn’t work unfortunately.

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>
1 Like

Inspired by @Lucas_Pires.

https://streamable.com/ev4c2g

3 Likes

That’s amazing @ThinhDinh!!

1 Like

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

1 Like

Wrap the text within a choice button?

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

Add this?

.bghTgA > * {
    white-space: pre-line;
}
1 Like

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!

Brilliant

1 Like

I found the way to break to new lines.

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;
}
2 Likes

What kind of control is?

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