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.

Hi,Pratik! Is this button working properly now?

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

1 Like

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)
10 Likes

Beautiful!

1 Like