textfield

hi,
i am adding text field dynamically. If m selecting a text field its color should be changed that differentiate from another textfields. (it should work like tab)

pls help me…

You could make a style like this:

.sometextfield.v-textfield-focus{ background-color: green !important; } and add the style to the textfield using:

textfield.addStyleName("sometextfield");

As Marius pointed out, you can add a stylename, and then set the background-color in CSS. Although I would not recommend using !important unless absolutely necessary.

TextField tf = new TextField();
tf.addStyleName("green");
.v-textfield.green {
    background-color: green;
}

To explain myself. I tested my code using the Vaadin sampler and the Chrome Development tool and without important i wasn’t able to apply the background-color. This might have to with me just editing the sampler.css file. So there might have been a problem which you might not have when using it in your own project but i just wanted to be sure that it worked for the OP.
I agree though that if not necessary don’t use !important as it can give your more trouble down the line.

@Joacim I would also say that the code you posted doesn’t really fullfill the OP’s request as it is missing the v-textfield-focus css selector. Your code will make the background green whehter it is selected or not.

Ah, missed that part. :slight_smile: Yes, then v-textfield-focus is the way to go.

hey Thanks …
its working for textfield…
but if m adding horizantal layout dynmacially … then how to use css for this…

Thanks in advance

Could you elaborate on what it is that you’re trying to achieve? .v-textfield-focus will target all textfields. Even those within layouts, if that’s what you’re wondering.

m looking for horizontal layout… in that m aading text box

m generation layout dynamically

hi,
"
.sometextfield.v-textfield-focus{
background-color: green !important;
}

textfield.addStyleName(“sometextfield”);

this one will work fine with text box …but same i want for horizontal layout
if iclick on it ,it should look different from other

plz help me

Add a LayoutClickListener to the HorizontalLayout, and implement the layoutClick method. You can then add whatever style name you want to the HorizontalLayout in that method (layoutClick).