How to increase the height of the Multiple Select field?

How to increase the height of the Multiple Select field?

by Frankie Kam -
Number of replies: 3
Picture of Plugin developers

Hi Itamar

It seems that during an "Add a new entry" action, the Select (Multiple) field is displayed but is limited in height. How do I increase its height? Via CSS?


The image above shows fields that have more than 5 options. So because the default height shows only the first 4 options, the rest of the options below the bottom border are hidden/obscured. If I want to click on the last option, I have to move (click and drag) the right vertical scrollbar down. But I want to show ALL options at once, and not have to click on the right vertical scrollbar. 

How do I do this?

Regards
Frankie Kam 

Average of ratings: -
In reply to Frankie Kam

Re: How to increase the height of the Multiple Select field?

by Itamar Tzadok -

You can set fixed height for the element in the activity css. You can wrap the pattern in the template with an identified container element or just inspect the dom to find the selector path. smile

Average of ratings: -
In reply to Itamar Tzadok

Re: How to increase the height of the Multiple Select field?

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Or you can set size="13" in the HTML when you output the element. It works nicely if you can automatically output size="N" when there are N choices, for N less than some cut-off like 15. Then when N gets too large, just use the limit value or something.

Average of ratings: -
In reply to Tim Hunt

Re: How to increase the height of the Multiple Select field?

by Itamar Tzadok -

Of course, but this requires adding the setting to the field's configuration and so requires a tracker issue and then it can be added in one of the future releases of the Dataform.

An alternate way to display ALL options for multiple selection is to use the checkbox field. And when the number of options gets too large you can use css to fix the height of the container element and display a scroll bar.

smile

Average of ratings: -