Drop-down formatting (wrapping)

[Indrit]

Hello, i have crated a form with pre-defined drop-down selections. However, every time the pre-defined selection text is too long it goes "out-of-screen" instead of being wrapped

what can I do to change it to wrap-text instead one single long line?

NOTE: Think of excel spreadsheet, when we format a cell alignment to make it "Wrap text"

Thanks, Indrit

 

[troester]

Enable "Enhanced Dropdowns" in "Layout" (dbjoin) or "Formatting" (dropdown)

 

[Indrit]

where do I need to go..? Under elements ? List? Forms?

 

[troester]

Element settings.
You may have to enable this setting in Fabrik Options before

 

[Indrit]

Thank you!

I did change both settings... at the Element as well as Global Settings/Fabrik/... just like you show on the image above. It worked !!! however the font of the dropdown got smaller. See below. How can i make that the same as the rest f the drop downs

 

[troester]

Add something like
.chosen-container.chosen-container-single {
font-size: 1rem;
}
to your J! template or to as custom CSS to your form template.

The chosen package is setting a fix 13px, Cassiopeia has the 1rem setting, other template (like Atum) don't have it.

 

[Indrit]

Thanks, I did create a custom css file ... named it user.css I added the code you suggested above but no changes.

I played around and changed the size from 1rem to 13px and vice versa no change on the front end.

 

[troester]

It depends on your J! template where you have to put the CSS.

Alternatively you can put it in your Fabrik form template in custom_css.php https://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/

Use your browser dev console to examine the element and it's CSS settings.

 

[Indrit]

Hello, although the suggestions provided herein solved my problem of wrapping the text during the drop down, however i noticed this ONLY work when i create a new record. If i oen an existing record and try to edit the content, the drop-down wrapped txt no longer works and i see a long sentence that stretches' outside of my computer screen. How can I fix that?

Thanks, Indrit

 

[troester]

Is this element readonly in an existing record?

 

[Indrit]

It is NOT a read only, although it might look like from the print screen!. Lets say if a user creates a records today, all is good, the wrap txt works perfect.

If the user returns later, clicks EDIT the screen he sees is the one I have attached here. When He tries to update the selection of "Element of performance" he can definitely choose another option from the available drop-down selection but the look is no longer wrap txt but one single Loooong line.

Indrit

 

[troester]

This is CSS, not Fabrik. Check your browser dev tools to examin what you need.

Add e.g.

.fabrikElement .chosen-container-single a.chosen-single {height:fit-content}
.fabrikElement .chosen-container-single a.chosen-single span {white-space: normal;}

 

[Indrit]

Element settings.
You may have to enable this setting in Fabrik Options before
View attachment 20934

Can you please repost the image. All I see is this:

I recently i am testing the Fabrik under Joomla5 and i am not able to WRAP TEXT like i did before.

Thank you so much