Hi all, I wrote a custom style for v-textfield, named it v-textfield-dashed and i call setStyleName(“dashed”) on a textfield but it does not work, i tried addStyleName(“dashed”) too but did not work either, any idea why?
I added some picture below.
Thank you so much!!
If you investigate your textfield in browser developer tools, what class names do you see?
It shows this, it seem like it added the style but doesn’t do anything with it. I tried to clear the cache but that didnt help
<input type="text" class="v-textfield v-widget dashed v-textfield-dashed" maxlength="20" tabindex="0">
I also checked the loaded CSS file in Network tab and it only shows the styles.css
Do you have the styles.css file in your theme folder? If so, delete it so that the dynamic scss recompilation will start.
That fixes it. all the style seem to be working fine still, but how come it still works after I delete the styles.css file? if it doesn’t do anything then why is it there? will deleting this file affect any styling in the future?
The compiled .css file is used in production; during development (productionMode:false) the on-the-fly scss compiler picks up changes to your .scss files. See the docs here: https://vaadin.com/docs/v8/framework/themes/themes-compiling.html