Multirow Choice Component (aka Chips UI)

Feature Requests
121

this worked, but not now :confused:

122

x2

123

@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

124

Well, never tried but

Try to use

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

Still doesnā€™t work unfortunately.

image
image993Ɨ792 153 KB

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>
126

Inspired by @Lucas_Pires.

https://streamable.com/ev4c2g

127

Thatā€™s amazing @ThinhDinh!!

128

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

129

Wrap the text within a choice button?

130

Yup, I tried a lot of settings but canā€™t get it.

131

Add this?

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

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!

133

Brilliant

134

I found the way to break to new lines.

image
image333Ɨ678 71.9 KB

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;
}
135

What kind of control is?

136

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

137

Hi,Pratik! Is this button working properly now?

138

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

139

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)
140

Beautiful!