asked on March 17, 2022
Hi,
I'm trying to get long field names that are cut off with an ellipsis (as seen on the left side in the attached screenshot) to wrap so that the whole field name is shown. I've achieved some success by using the following CSS:
.fm-text-display {
white-space: pre-wrap !important;
}
This results in the text wrapping but the size of the rows in the list are not being adjusted to fit all of the text so we still get text being overlapped by the row borders and cut off (as seen in the right side of the attached screenshot). I've been trying a few things to manipulate the row size using CSS that haven't worked. Would you guys be able to give me any suggestion on this?
Thanks,
Darius
⋅ March 18, 2022
Hi, Darius!
Thank you for detailed description.
To adjust the rows size, you should set the height: auto !important for the fm-draggable class. Also more configurations should be added for fm-text-display and fm-list-wrap-all.
Here is code containing all styles that should be applied:
.fm-text-display {
white-space: pre-wrap !important;
position: relative !important;
left: auto !important;
right: auto !important;
}
.fm-list-wrap-all .fm-text-display {
width: calc(100% - 50px)
}
.fm-draggable{
height: auto !important;
}
Check out the resulting Field List on JSFiddle: https://jsfiddle.net/flexmonster/8mtdr1Lu/.
Please let us know if more questions arise.
Best Regards,
Maksym
⋅ March 21, 2022
Looks like this is working well. Thank you Maksym!