In sass change font-size of textfield

Flow
1

Hello,

I would like to change the font-size of a specific textfield. I’m using Vaadin 7.1.5 with the standard sass theme (generated by the eclipse plugin or like in the wiki).

I have a simple TextField :

TextField txtUserName = new TextField("");
txtUserName.setPrimaryStyleName("loginTxt");

and in my scss file I have :

.loginTxt {
 	font-size : 20px;
}

The problem is that it does not take into account the font-size.

This method works fine for a button.

I’ve tried using :

&.v-app input {
	font-size: 20px;
}

which works but change all the TextField which is not what I want.

Using firebug I see that the textfield has :

class="loginTxt v-widget loginTxt-prompt"

Did I miss something or is it a limitation in Vaadin?

Thanks,
Gerald
[font=Courier New]

[/font][font=Courier New]

[/font]

2

You could try setting your font-size styling important.
font-size: 20px !important;
What happens in your case is, i think, that another standard style which also sets font-size might override your one.

3

… or you can simply make your style more specific than the standard one to avoid needing to resort to !important.

The problem with !important is that overriding it gets tricky so I would recommend first using browser developer tools for checking the selectors that already apply and then making yours more specific - search for information about “CSS specificity” if the concept and the rules used by the browser to determine specificity are not fully familiar to you.

In smaller applications !important might be fine to use, but in larger systems and in frameworks you’d want to constrain the rules so that they can still be overridden and minimize the use of !important.

4

You’re right !important is the more “dirty” solution but i often suggest it before the specific selectors - way because it is quicker realizable for the OP so that you can at first see if that’s even the problem before you get all fancy.

…but now that there is this your post in the forum i will probably more often link to this thread when a similar question pops up.

5

Thank You Henri and Mairus for your answers.
As Henri said, it’s better to read about CSS specificity and the article on css-tricks is very usefull.
For my case, the !important did work but input.loginTxt { .... } did also work and looks better.