styling of selectize menus

[i-just]

Description

• changed max-height from the default 200px to 70vh
• kept the options height as is (so it’s still easy to select an option via click/touch)
• added a horizontal line above optgroup headings (except when it’s the first item on the list)
• indented options under the optgroup heading so it’s clear that they belong to a group
• moved selectize initialisation for multi-select to a template and applied the same “show above if there’s not enough space to show below” logic to it

Dropdown (before & after):

Multi-select (before & after):

Related issues

dev-1124

[linear]

DEV-1124 Improve Selectize menu styling

[brandonkelly]

The multiselect.twig template (and Cp::multiSelectHtml()) should be left alone. We can either:

• add a new multiselectize.twig template + Cp::multiSelectizeHtml() and Cp::multiSelectizeFieldHtml() methods; or
• check for a multi variable in the selectize.twig template

Second option is probably easier.

[i-just]

I went a slightly different way regarding those amends. multiselect.twig template is back to what it used to be; Cp::multiSelectHtml() is tweaked slightly, plus I moved the code that determines whether the dropdown shows above or below, so a dropdown and a multi-select can use it.

If you’re not happy with this and you want to strictly avoid any changes to Cp::multiSelectHtml(), I think the only option will be to go with a new multiselectize.twig template + Cp::multiSelectizeHtml() and Cp::multiSelectizeFieldHtml() methods, but happy to discuss this further if you’d like.

[brandonkelly]

Cp::multiSelectHtml() is tweaked slightly

Did you push everything up? Not seeing any evidence of this in on https://github.com/craftcms/cms/pull/13176/files.

[i-just]

Yes, everything's pushed; I just described it wrong... I was supposed to say: MultiSelect::inputHtml() is tweaked slightly. Sorry!

[brandonkelly]

Just updated _includes/forms/selectize.twig to support a multi param, and switched all multi-select Selectize inputs over to Cp::selectizeHtml() + multi: true.