CODEWITHSUNDEEP
javacsscomboboxjavafx-8styling
Cyrus13
Cyrus13

Reputation: 917

JavaFX: How to change ComboBox/ChoiceBox Drop Down Button Position?

So guys, this should be very simple but I can't find the answer. My knowledge in CSS is very limited.

I want to move the "Drop Down Button" or the "Arrow" of a ComboBox/ChoiceBox to the left side of the component, instead of the right side.

Just like the picture below: ComBox with arrow on left side

I found a way to make the arrow transparent, like this:

.combo-box .arrow-button {
    -fx-background-color: transparent;
}

And this was my naive approach to move the arrow to the left side:

.combo-box .arrow-button {
    -fx-alignment: LEFT;
}

So, does anyone knows if this is possible to achieve? How? Thanks!!

Upvotes: 2

Views: 2556

Answers (2)

wzberger
wzberger

Reputation: 933

The ComboBox itself does not support the style property "-fx-alignment" - only the editor (textField) does.

You can either extend ComboBoxBaseSkin (ComboBoxListViewSkin), override #layoutChildren() and position the arrow button by yourself or simply change the node orientation just like in the example below. However, changing the node orientation affects the complete content - means editor and popup content. You can repair this for the editor by applying the opposite (because of RTL) alignment or by changing the NodeOrientation to LTR just like for the ListView of the popop.

combo.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
combo.getEditor().setStyle("-fx-alignment: baseline-right");
combo.setOnShowing(evt -> ((ComboBoxListViewSkin<?>)combo.getSkin()).getListView().setNodeOrientation(NodeOrientation.LEFT_TO_RIGHT));

Upvotes: 1

sialcasa
sialcasa

Reputation: 1

You have to set the NodeOrientation. The Problem is, that the StyleableProperty for the NodeOrientation is not supported yet, so you can't set it with css.

check Line 6136 in javafx.scene.Node --> Node#nodeOrientationProperty

Set the orientation within code or FXML

Upvotes: 0

Related Questions