gatanaso/multiselect-combo-box-flow

Minor cosmetic issue

markhm opened this issue · 2 comments

Note that the second and subsequent items are aligned ón the left border, iso with a bit of space in between, as with the first item.

Screenshot 2020-02-16 at 20 32 59

Thanks for a nice component...!

Hi @markhm,

Thanks for opening this issue. Hopefully this answer does not come too late :)

The MultiselectComboBox has stylable parts, so you can adjust the styles however you see fit for you application. For example, to increase the spacing between the tokens (i.e. affect the input field styles) you need to target the multiselect-combo-box-input component:

  1. Create a new file under frontend/styles called multiselect-combo-box-input-styles.css
  2. In that file add the following code:
[part="token"] + [part="token"] {
    margin-left: 10px; // or any other value
}
  1. Apply the new style to your app by adding the following annotation:
@Route("")
@CssImport(value = "./styles/multiselect-combo-box-input-styles.css", themeFor = "multiselect-combo-box-input")
public class MyAwesomeApp extends VerticalLayout {.....}

The above code for example will add more spacing between adjacent tokens, but you can also adjust any of the other parts available in the web component.

Hope this helps,
Goran

Hi @gatanaso,

Many thanks for going above and beyond on your answer. It is definitely still on time and I will be able to use this in my solution. 👍🏻🙏🏻