this worked, but not now
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
Well, never tried but
Try to use
word-wrap: break-word;
display: table-cell;
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>
Thank you bro, if I find a way to wrap the text I’ll let you know. Have a nice day!
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;
}
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
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;
}
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.
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)
Beautiful!