Share the post "Create Up And Down Arrow In Java FX ComboBox"
The impressive thing about Java FX is how well developers can use CSS to style the look and feel of the user interface.
The ComboBox component by default has an arrow icon pointing downward. The requirement given to me was to have two arrows, one pointing up and the other pointing down (see image). I figure the easiest would be to use an image to change it.
However, if the height of the ComboBox changes, so will the image. But since the image I had was small, it would not look good when it is expanded.
The solution I came up with was to change using an SVG or what is known is scaled vector graphics. This is more convenient and advantageous because even if it gets scaled to a smaller or bigger size, the quality of the graphics will still be the same.
In the CSS file, I did it like this.
|
1 2 3 4 |
.combo-box .arrow { -fx-padding: 5; -fx-shape: "M150 0 L150 0 L0 280 L300 280 M0 370 L300 370 L150 670 L150 670 Z"; } |
Now all ComboBox components in your scene, will have the up and down arrow icon.
