Multiple Select - Increase size - number of options displayed

Multiple Select - Increase size - number of options displayed

peterbrownepeterbrowne Posts: 45Questions: 12Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • peterbrownepeterbrowne Posts: 45Questions: 12Answers: 0

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

  • peterbrownepeterbrowne Posts: 45Questions: 12Answers: 0

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

  • allanallan Posts: 50,737Questions: 1Answers: 7,581 Site admin
    div.DTE_Field_Type_select select {
      height: 5em; /* change as needed */
    }
    

    should do it.

    Allan

  • peterbrownepeterbrowne Posts: 45Questions: 12Answers: 0
    edited November 1

    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.

  • peterbrownepeterbrowne Posts: 45Questions: 12Answers: 0

    Also tried the following but not working:

    select[multiple]{
      height: 5em;
    }
    
  • allanallan Posts: 50,737Questions: 1Answers: 7,581 Site admin
    Answer ✓

    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

  • peterbrownepeterbrowne Posts: 45Questions: 12Answers: 0
    edited November 4

    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%;
    }
    
Sign In or Register to comment.