Taking more vertical space in "read-only" mode

[syampillai]

I noticed that when used in a FormLayout, the vertical height is more than normal when the component is in "read-only" mode. Normal height is resumed when in "edit" mode. (Tried version 3.0.0.rc1 and earlier versions)

[gatanaso]

Thanks for reporting this issue.

Have you tried adjusting/customizing the style of the component?

[syampillai]

No, this effect was when I just used it in the default way.
Read-Only mode: (Please check the field labeled "Device")

Edit mode:

[gatanaso]

Thanks for the feedback, I should improve the default here. And since the MultiselectComboBox has style-able parts, this is easy to also modify in your own app:

1. Create a new file under frontend/styles called multiselect-combo-box-styles.css
2. In that file add the following code:

[part="readonly-container"] {
    padding: 4px;
}

3. Apply the new style to your app by adding the following annotation:

@Route("")
@CssImport(value = "./styles/multiselect-combo-box-styles.css", themeFor = "multiselect-combo-box")
public class MyAwesomeApp extends VerticalLayout {.....}

The above code is to fix the "height" in readonly mode, but you can also adjust any of the other parts available in the web component.

Hope this helps,
Goran

[syampillai]

Thank you Goran