CODEWITHSUNDEEP
cssvaadinpolymer-2.xvaadin10
batgerel.e
batgerel.e

Reputation: 857

How to override style of vaadin element?

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 ?

Upvotes: 0

Views: 1695

Answers (1)

Paul Roemer
Paul Roemer

Reputation: 213

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.

Upvotes: 3

Related Questions