CODEWITHSUNDEEP
cssjavafx
graynk
graynk

Reputation: 141

How to change button width for JavaFX Spinner with CSS?

I want to change width for increase and decrease arrow buttons in JavaFX 11 (not change the layout). I've tried the following CSS, but that doesn't work

.spinner .increment-arrow-button {
    -fx-pref-width: 50px;
}

This one works, however it stretches the arrow itself. I'd like to resize the button, not the glyph.

.spinner .decrement-arrow-button .decrement-arrow {
    -fx-pref-width: 50px;
}

Setting min/max width doesn't change a thing either.

Upvotes: 2

Views: 1254

Answers (1)

M_G
M_G

Reputation: 46

Try playing around with the -fx-padding for the following style classes

The following reduces the width of buttons and arrows

.spinner .increment-arrow-button { 
    -fx-padding: 1 2 1 2; /*caspian.css values are 4 8 4 8 */
}
.spinner .decrement-arrow-button {    
    -fx-padding: 1 2 1 2; /*caspian.css values are 3 8 6 8 */
}


.spinner .increment-arrow-button .increment-arrow {
    -fx-padding: 2 3 2 3;    /*caspian.css values are 2 4 2 4 */
}
.spinner .decrement-arrow-button .decrement-arrow {
    -fx-padding: 2 3 2 3; /*caspian.css values are 2 4 2 4 */
}

You might have to increase the padding on left and right to make buttons wider.

Upvotes: 3

Related Questions