0

I have trouble with some styling vaadin elements. I need to style default vaadin-combo-box element.

My importing:

<link rel="import" href="../../../bower_components/vaadin-valo-theme/vaadin-combo-box.html">

And it looks like:

When default style is imported

My shared style html:

<dom-module theme-for="vaadin-combo-box">
  <template>
    <style include="vaadin-combo-box-default-theme">
        [part="input-field"] {
          padding: 0;
        }
    </style>
  </template>
</dom-module>

What did i do wrong ? And any advice ?

ssindelar
  • 2,833
  • 1
  • 17
  • 36
batgerel.e
  • 837
  • 1
  • 10
  • 31
  • Your dom-module is missing an `id`. You need to have a unique identifier for each module. Otherwise, they can’t be used. – Jouni Mar 15 '18 at 07:54
  • Also, you don’t need to include the default theme explicitly anymore, if you are using the latest major version, which has the Lumo theme by default. – Jouni Mar 15 '18 at 07:57

1 Answers1

3

I guess you read through https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes already.

If you check https://vaadin.com/components/vaadin-combo-box/html-api/ you will noticed that the part input-field you have defined does not exist for the combobox. The documentation lists:

  • text-field: The text field
  • clear-button: The clear button
  • toggle-button: The toggle button

The <vaadin-text-field> used by the combo-box has an input-field part. But if you want to style that one, you will need to add a custom styling for the text-field itself.

Paul Roemer
  • 213
  • 1
  • 6
  • Paul’s correct – combo box uses vaadin-text-field internally, so you should target your theme module for that. We should improve our styling documentation to show these hierarchies. – Jouni Mar 15 '18 at 07:56