Managing styles of custom text field

Flow
1

Hi,

We are using the autoreplace add-on that Matti wrote (http://vaadin.com/directory#!addon/127).

In the client-side component, a style name is set for the component : v-autoreplacefield

So, even though this component is a text field (it inherits from text field and provides all other features of text field), the styling is different than a regular text field. In the end, the only way we have found so far was to copy/paste the whole textfield.css file and replace .vtextfield by v-autoreplacefield

And each time we upgrade to a newer vaadin release, we have to look up that file to check if it has changed

Isn’t there an easier way to manage such styles consistently?

Thanks,
S.

2

Ok, I had trouble implementing what you did but I figured it out. Just in case someone else is struggling with the same.

  2. Created my own theme
  3. Edited the styles.css file to import the reindeer theme css
  4. Edited the styles.css file to add the css classes of textfield (found in textfields css inside vaadin jar)
  5. Searched + replaced ‘textfield’ with ‘autoreplacefield’ against the pasted css classes (previous step)
  6. Set the application to use my theme
  7. Important! Shift + refresh the browser to get the updated css

however I couldn’t think of a way to do this nicely. Maybe a source revision for the addon would be the only neat solution

jim