Multiple Select - Increase size - number of options displayed

peterbrowne

How can the number of options displayed in a multi select be increased from the default of 4?

peterbrowne

{
label: "Presentations:",
name: "presentation[].presentation_pk",
type: "select",
placeholder: 'No selection',
placeholderDisabled: false,
placeholderValue: 0,
multiple: true
}

peterbrowne

The element is a div with class DTE_Field_Input, not a <select> so not sure how to achieve this...

allan

div.DTE_Field_Type_select select {
  height: 5em; /* change as needed */
}

should do it.

Allan

peterbrowne

That CSS just seems to make normal selects higher, but no effect on multi select. I just want to have the number options visible in multi selects to be more than 4.

peterbrowne

Also tried the following but not working:

select[multiple]{
  height: 5em;
}

allan

5em was perhaps a poor choice on my part since that's more or less what the default height of the multi-select is in browsers. Change it to 10em and you'll see the difference.

Example: http://live.datatables.net/nuvihosi/40/edit

Allan

peterbrowne

Thanks Allan, that works fine including selector specific to select with type 'multiple'

div.DTE_Field_Type_select select[multiple] {
  height: 10em; /* change as needed */
  width: 100%;
}