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.

javafx_updownarrow

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. 

 
Now all ComboBox components in your scene, will have the up and down arrow icon.

Related Posts Plugin for WordPress, Blogger...

2 comments

  1. Hello,

    I’m looking to have a combobox with a table or a multicolumn, so i can display a custom object (for example a Person object, with name, address and phone number).
    would it be posible? thanks

    1. @puma: hi, im not sure. but a combobox with a table inside would look weird. never saw a component like that before. or do you mean when you click on the combobox and instead of a list that popups up, the table gets shown instead?

      Java FX is pretty flexible. I like it better than Swing so maybe what you want to do is doable.

Leave a Reply

Your email address will not be published. Required fields are marked *