Setting attributes both in FXML and in CSS

Question

If I am trying to set the same attribute in FXML and in a class definition in CSS, I would expect that the attribute set in FXML is considered more specific than the one from CSS.

For example, if I have a control such as

<Label styleClass="myLabel" prefHeight="40.0">

and, at the same time, a CSS definition such as

Label.myLabel {
    -fx-pref-height: 100px;
}

I would expect the label to have a height of 40 px. Instead, it has 100 px. Is there a way to make the attribute in the FXML have precedence?

In HTML, browsers simply map presentational attributes to CSS rules with specificity lower than that of a * rule. This allows browsers to implement all layout with CSS alone, while always allowing authors to override presentational attributes with CSS. On the flip side it is not possible to force a presentational attr to override a CSS rule. Depending on how CSS is implemented in JavaFX, this may or may not be the case for FXML. — BoltClock
– BoltClock, Commented Apr 17, 2016 at 15:37
@BoltClock So mapped to the "browser domain", this is indeed wanted behaviour? So it might be the same in FXML. Thank you for your note! — glglgl
– glglgl, Commented Apr 17, 2016 at 19:18
I would say they're between browser and author domain - more specific than any browser defaults, and less specific than author CSS (including external links, <style>, inline styles). — BoltClock
– BoltClock, Commented Apr 18, 2016 at 5:50

glglgl · Accepted Answer · 2016-04-19 19:35:18Z

In the (so far) absence of a qualified answer, I can only guess:

While one could expect that the FXML attributes have about the same specificity as an inline style definition, they haven't any relation.

The reason for this is the evaluation order: the FXML attributes are evaluated at an earlier time than and completely independent of the CSS definitions. That's why the CSS definitions completely overwrite the attribute definitions, making them obsolete.

Now it is more than a guess: Here I just found that the order of precedence is

a style from a user agent stylesheet in Application.setUserAgentStylesheet(java.lang.String)

value set from code, for example calling Node.setOpacity(double)

a style from an author stylesheet in Scene.getStylesheets() or Parent.getStylesheets()

a style from Node.setStyle(java.lang.String)

assuming that pre-setting a value in the FXML is equivalent to a value set from code.

Collectives™ on Stack Overflow

Setting attributes both in FXML and in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest