JavaFX 2 classes with different name have same css code

Question

🍄It may seem duplicate with this question but it is not working.

Two classes exist which extend HBox and have one TextField element.I have added on each one a StyleClass like this:

//for one class
 getStyleClass().add("search-box");

 //for the other class
 getStyleClass().add("libraries-search-box");

So i am modifing the appearence of their TextField with the above css code:

.search-box .text-field {
    -fx-background-color: white;    
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;   
     ..... 
}

.libraries-search-box .text-field {
    -fx-background-color: white;    
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;   
     ....
}

I want to replace the duplicate code and i try:

.search-box , .libraries-search-box .text-field {
     -fx-background-color: white;   
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;
     ...//   
}

but it works only for '.libraries-search-box'.How i get get it work for both?

.text-field needs to come after both parents in the selector — rmlan
– rmlan, Commented Sep 14, 2016 at 13:02

Nicolas Filotto · Accepted Answer · 2016-09-14 13:08:39Z

5

You need to specify .text-field to both .search-box and .text-field, as next:

.search-box .text-field, .libraries-search-box .text-field {
     -fx-background-color: white;   
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;
     ...//   
}

Indeed .search-box , .libraries-search-box .text-field is seen as .search-box or .libraries-search-box .text-field not as .search-box .text-field or .libraries-search-box .text-field as you expect.

edited Sep 14, 2016 at 13:08

answered Sep 14, 2016 at 13:02

Nicolas Filotto

45.2k11 gold badges97 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GOXR3PLUS Over a year ago

Thanks for answer!

DVarga · Accepted Answer · 2016-09-14 13:15:45Z

1

The correct format is:

.search-box .text-field, .libraries-search-box .text-field {
     -fx-background-color: white;   
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;
     ...//   
}

In your example you defined the CSS attributes for the .search-box and the .libraries-search-box .text-field class selectors.

edited Sep 14, 2016 at 13:15

answered Sep 14, 2016 at 13:03

DVarga

21.9k6 gold badges57 silver badges60 bronze badges

1 Comment

GOXR3PLUS Over a year ago

Thanks for answer!

Collectives™ on Stack Overflow

JavaFX 2 classes with different name have same css code

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related