Read-only mode has visual problems

[olikam]

In read-only mode multiselect combobox appears squeezed if it's empty. If it's not empty, it's not as same as the original combobox; there is no down-arrow, a little bit shorter and the text is a little bit lighter. You can find the screenshots in the attachment. (First component is the original combobox, the second one is multiselect...)

[gatanaso]

Hi @olikam,

Until the default is improved, you can adjust the styles for readonly mode similar to how it's done here: #50 (comment).

For you particular case, I think the following CSS will align the components better:

[part="readonly-container"] {
  display: inline-flex;
  align-items: center;
  padding: 0 calc(0.375em + var(--lumo-border-radius) / 4 - 1px);
  font-weight: 500;
  color: var(--lumo-secondary-text-color);
  min-height: var(--lumo-text-field-size);
}

BR,
Goran

[gatanaso]

Regarding the "drop down arrow", that is currently by design. I could consider adding it when updating the defaults. Thanks for the feedback.