addStyleName not work?

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,

I just start to use vaadin and have a problem using addStyleName. Here is the details:

// code
…
this.priceListName = new TextField();
this.priceListName.setStyleName(“mystyle”);
…

//css file
…
.v-textfield-mystyle {
border: thin dashed;
background: white;
}
…

But seems addStyleName does not work at all. Does anyone know how to solve this problem?

Thanks a lot

2

Hi Jay,

you use the wrong name in the css. This should work:


.mystyle {
border: thin dashed;
background: white;
}

Regard,
Pascal

3

First, you used setStyleName, not addStyleName. But both should work fine as we all make extensive use of them.

Check your browser page using whatever developer tools you have for markup/styles debugging. Be sure your CSS is being included in the page since by default your own CSS needs to be defined in a custom theme.

The .v-textfield-YOURNAME should work, too, since Vaadin will add just YOURNAME as well as the widget-specific version like you are using.

4

Thanks for your suggestion, now I’ve tried to use firebug to debug this webpage, and I found:

HTML source for that textfield component:
…

...

So I changed the css file as follows:

…
.v-textfield.v-textfield-mystyle.mystyle {
border: none;
background: white;
}
…

And it works! But I wonder why I should modify css file like that? Can anyone give me an answer?

Thanks alot

5

please use addstylename not use setstylename

example:-

	Label adminpanelmessage = new Label();
	adminpanelmessage.setValue(adminmsg);
	adminpanelmessage.setContentMode(Label.CONTENT_XHTML);
	adminpanelmessage[b]

[size=6]

[/size].addStyleName(“panelwelcome”);
[/b]

CSS:-
[size=5]
[b]

[/b]
.panelwelcome
[/size] {
font-size: 18px;
margin-left: 215px;
margin-top: 200px;
}

6

Got me. I wouldn’t have though the class name .v-textfield.v-textfield-mystyle.mystyle was even valid.

Are you sure .v-textfield-mystyle or just .mystyle wouldn’t have worked? I certainly have never used the syntax you show.

7

No, v-textfield-mystyle or just .mystyle wouldn’t not work, no matter using addStyleName or setStyleName.

From html source code, it seems only search .v-textfield.v-textfield-mystyle.mystyle class for the css style

8

.v-textfield.v-textfield-mystyle.mystyle basically means a div class that has .v-textfield AND .v-textfield-mystyle AND .mystyle. It requires all three from it.

And the discussion about using addStyleName or setStyleName: Doesn’t matter the slightest if you only add one stylename. The difference between those two comes into play when you add the second stylename. add just adds it while set replaces the current one.

My guess why .mystyle{ } didn’t work directly is
CSS specificity
. That means that if there is one CSS rule that is more specific than another, the more specific one will override the other one, no matter in which order they are specified. The vaadin theme has some predefined rules for textfield (to make it look like the basic textfield looks) which are more complex than only one css rule.This is why many also use the !important tag in the end of declaratations, which is in my opinion a very bad practice Something like .v-app .textfield or .textfield.mystyle might have worked. You can see in firebug which style override which by choosing the element and looking at the applied rules. The most important one is at the top.