如何设置上下文菜单宽度以匹配选择框

Question

我使用场景构建器2.0创建了ChoiceBox并附加到IntelliJ Idea并添加以下代码以将项目添加到Main类中的ChoiceBox

ChoiceBox genderBox = (ChoiceBox) scene.lookup("#gender");
genderBox.setItems(FXCollections.observableArrayList("Boy", "Girl"));
genderBox.getSelectionModel().select(0); 

FXML的选择框代码如下

<ChoiceBox id="gender" prefHeight="16.0" prefWidth="150.0" GridPane.columnIndex="1" GridPane.rowIndex="11">
           <GridPane.margin>
              <Insets left="10.0" />
           </GridPane.margin>
</ChoiceBox>

无论如何，在运行Main类时，我会看到如下选项框。选择框宽度与上下文菜单（弹出窗口）宽度不匹配。

如何设置上下文菜单的宽度？

修改

无论如何设置宽度到组合框中的上下文菜单工作正常。所以我用组合框移动了。 see example fxml.

Answer 1

首先，设置ChoiceBox本身的宽度......

<ChoiceBox prefWidth="150">
    ...
</ChoiceBox>

然后，通过CSS设置弹出列表的宽度......

.choice-box .menu-item > .label {
    -fx-pref-width: 100;
}

注意：由于下拉按钮，该框比列表宽约50px。