Subhranil Subhranil - 5 months ago 78
CSS Question

Styling the "show details" area of an Alert in JavaFX

How can I style the marked area of an

Alert
's
Dialog
using CSS? Please help.

Alert Image

Answer

The Modena.css styling for Alert is available here from ~ line 3339

For the details button the selectors of interest would be:

.dialog-pane > .button-bar > .container > .details-button {
  -fx-alignment: baseline-left;
  -fx-focus-traversable: false;
  -fx-padding: 0.416em; /* 5px */
}

.dialog-pane > .button-bar > .container > .details-button.more {
    -fx-graphic: url("dialog-more-details.png");
}

.dialog-pane > .button-bar > .container > .details-button.less {
    -fx-graphic: url("dialog-fewer-details.png");
}

.dialog-pane > .button-bar > .container > .details-button:hover {
    -fx-underline: true;
}


Example:

CSS:

.dialog-pane > .button-bar > .container > .details-button.more {
    -fx-background-color: red;
}

.dialog-pane > .button-bar > .container > .details-button.less {
    -fx-background-color: green;
}

enter image description here enter image description here


Update:

You can also change the image by modifying the -fx-graphic, but the image must be of the dimensions you want. The below images use a 24 x 24 icon

CSS:

.dialog-pane > .button-bar > .container > .details-button.more {
    -fx-graphic: url("unchecked_checkbox.png");
}

.dialog-pane > .button-bar > .container > .details-button.less {
    -fx-graphic: url("checked_checkbox.png");
}

un-marked checkbox marked checkbox

Comments