Hello everyone,
I am using Polymer 2.6 with newest version of vaadin-text-field and other vaadin elements. I would like to use material design theme but I am having some styling issues.
Easiest way to describe it, is to look at the following image
as you can see, there are still applied some styles from lumo theme. Animation doesn’t work, padding is wrong and background is wrong.
Inside of my custom element I import vaadin-text-field.html and /bower_components/vaadin-material-theme/vaadin-text-field.html
and then I use a text field like <vaadin-text-field label="testing"></vaadin-text-field>.
Am I implementing it differently than it should be? How can I fix this?
vaadin-text-field version - 2.0.1
vaadin-material-theme version - 0.3.0
btw. When I set some background, edit padding for label and add transition it works perfectly… But I had to edit source code which is not good approach at all
Chukkrit Visitsaktavorn:
+1 Get this issue too, it’s not a big deal but feel a bit offend.
How can I workaround with this issue ?
the only workaround I found is to edit source code ( about 4 lines )… because vaadin is not implementing custom styling of their’s elements. In compare to original components from Polymer team, vaadin elements are really badly written… Or create your own custom theme for vaadin, where you will propably solve this issue, but I have no idea how to create custom theme and there are no tutorials on the internet about it… (at least I didn’t found anything about componentns styling, only about vaadin 8 and 10)
Chukkrit Visitsaktavorn:
+1 Get this issue too, it’s not a big deal but feel a bit offend.
How can I workaround with this issue ?
the only workaround I found is to edit source code ( about 4 lines )… because vaadin is not implementing custom styling of their’s elements. In compare to original components from Polymer team, vaadin elements are really badly written… Or create your own custom theme for vaadin, where you will propably solve this issue, but I have no idea how to create custom theme and there are no tutorials on the internet about it… (at least I didn’t found anything about componentns styling, only about vaadin 8 and 10)
I found the solution, I’ve to remove all original vaddin elements
and then import only vaadin-material-theme/vaadin-xxxxxx instead.
So the material theme can fully override lumo theme of their original elements.
From your, remove vaadin-text-field.html and just use vaadin-material-theme/vaadin-text-field.html instead.
