How do you make multiple selects visually display many in table view?

koniahin

  {
    label: 'Tags',
    name:  'webcolors.tags',
    type:  "select",
    multiple: true,
    height: '3em',
    separator: '|',
    default: '',
    options: [
      { label: "", value: "" },
      { label: "pastel", value: "pastel" },
      { label: "power", value: "power" },
      { label: "neutral", value: "neutral" },
      { label: "blue", value: "blue" },
      { label: "green", value: "green" },
      { label: "red", value: "red" },
    ],
  }

This works perfect in popup editor view. In table view when you click on the edit field it only displays a single item in the list. The other items are there but you have to scroll up/down making it awkward to select multiple (control-c).

allan

Use a little CSS to make it bigger:

div.DTE_Inline select {
  height: 100px;
}

Of course the downside to that is that it will disrupt the row height. You might want to consider using Bubble editing instead.

Allan

koniahin

That didn't work but provided the clue. The solution here:

div.DTE_Inline select {
min-height: 100px;
}

Much thanks

koniahin

Well this solved the problem for multiselect but also affects single select. Is there a way to only target single select?

allan

div.DTE_Inline select[multiple] {

Should do it.

Allan

koniahin

Perhaps I have some conflicting CSS, not sure but in my case it requires min-height, not height, as:

div.DTE_Inline select {
min-height: 4rem; /* single-select */
}

div.DTE_Inline select[multiple] {
min-height: 8rem; /* multiple-select */
}

It works, great, thanks.