JavaFX: ComboBox in GridPane causes unnecessary resizing

I have GridPane

with 5 columns. This is my setting hgrow

for column constraints.

• SOMETIMES
  
  
• ALWAYS
  
  
• SOMETIMES
  
  (fixed size)
• SOMETIMES
  
  
• ALWAYS
  
  

The whole GridPane

is basically a layout for a two-column form. My columns 1 and 4 (index 0 and 3) are field labels, and columns 2 and 5 are input fields ( TextField

and so on). Column 3 is just a fixed-width padding between the columns of the two shapes.

I have several ComboBox

in my form - some are in the left column and some are in the right column. I have set the maximum width of all ComboBox

to MAX_VALUE

.

When the form loads, the layout looks like I intended (both input-field columns are of equal width). However, when I click on any of it ComboBox

, it will cause the column I clicked ComboBox

to expand in width, which will cause the other column of the input-field to shrink by the same amount.

I can alternately click on the ComboBox

left and right and the widths of both columns will change. The change will be smaller and smaller, and eventually the columns will stop resizing. The end result is that the two columns are not equal in width.

I have the same problem for another control JFXDatePicker

from JFoenix

.

Another limitation I have is that this form is within bounds SplitPane

, so I must avoid setting an explicit width.

What can I do to fix this problem?

Edit

I guess I'll attach a sample here addressing how little this question has.

@Override
public void start(Stage primaryStage) throws Exception {
    VBox root = FXMLLoader.load(getClass().getResource("Test.fxml"));
    Scene sc = new Scene(root);
    primaryStage.setScene(sc);
    primaryStage.show();
}

      

        
        
        
      

    

FXML:

<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
        <Insets bottom="30.0" left="30.0" right="30.0" top="30.0" />
    </padding>
   <children>
      <GridPane hgap="6.0" vgap="6.0" VBox.vgrow="ALWAYS">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" />
          <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" />
            <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Label text="Left 1" GridPane.halignment="RIGHT" />
            <Label text="Left 2" GridPane.halignment="RIGHT" GridPane.rowIndex="1" />
            <Label text="Left 3" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
            <Label text="Right 1" GridPane.columnIndex="2" GridPane.halignment="RIGHT" />
            <Label text="Right 2" GridPane.columnIndex="2" GridPane.halignment="RIGHT" GridPane.rowIndex="1" />
            <Label text="Right 3" GridPane.columnIndex="2" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
            <ComboBox maxWidth="1.7976931348623157E308" GridPane.columnIndex="1" />
            <ComboBox maxWidth="1.7976931348623157E308" GridPane.columnIndex="3" />
            <ComboBox maxWidth="1.7976931348623157E308" GridPane.columnIndex="3" GridPane.rowIndex="2" />
         </children>
      </GridPane>
   </children>
</VBox>

      

        
        
        
      

    

Result:

As shown in the GIF, the layout is what I wanted when the window is initially launched. When I clicked on one of the dropdowns on the right, the column suddenly increased its width and shrunk the other column. I need the width of both columns to remain constant when either of the combobox is clicked.

Update

I seem to be missing some information in my question. The end result I want is GridPane

with 4 columns in two pairs of label input. An additional column can be added between pairs to add additional padding between pairs, but this is optional. The entire mesh will be in a resizable environment (for example, in my example, a resizable stage). I believe the mutable environment is not unreasonable, otherwise I would give all columns absolute dimensions (or even use any Pane

and give it an absolute position) and the problem would not exist.

Both of these shortcuts should be visible at all times (unless the whole thing GridPane

is scaled down to an awful small size), and any extra space should be allowed for input controls ( TextField

, ComboBox

etc.). Likewise, if GridPane

shrinking, I expect input columns to shrink instead of label columns. Columns of labels must maintain a fixed size, and this size is the minimum size required to display all labels without ellipsis appearing.

Since the final form has a mixture of different input controls, it would make it ComboBox

weirder if it wasn't resized to the same width as the other controls in the same column. I admit this is a demand - I'm picky.

I also expect both input columns to be the same width and that this should remain true at all times.