JavaFX GridPane automatic sizing

Question

I'm new to JavaFX and currently I try to build a small chat window. For this purpose I got the following custom Cell Layout for my Listview.

Grid

I use an outer HBox, so I can align the messages like whatsapp... (align left and right). In my GridPane I got 2 columns, the message (Label) on the left side and some other random stuff on the right side (timestamp, some small icons). Now what I need: The GridPane / left Column / Label should dynamically grow / shrink in height, depending on how long the text message is. Furthermore the minimum height should be the height of the right column.

Here is my .fxml for the cell:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="50" minWidth="-Infinity" prefWidth="580.0" styleClass="theme-presets inbox-entry" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane prefHeight="100.0" prefWidth="452.0">
        <columnConstraints>
          <ColumnConstraints hgrow="ALWAYS" maxWidth="359.0" minWidth="10.0" prefWidth="351.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="103.0" minWidth="0.0" prefWidth="101.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="ALWAYS" />
        </rowConstraints>
         <children>
            <Label fx:id="labelMessage" alignment="TOP_LEFT" prefHeight="100.0" prefWidth="286.0"  wrapText="true" />
            <AnchorPane prefHeight="100.0" prefWidth="133.0" GridPane.columnIndex="1">
               <children>
                  <ImageView fx:id="imageViewEncrypted" fitHeight="33.0" fitWidth="33.0" layoutX="4.0" layoutY="23.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/key.png" />
                     </image>
                  </ImageView>
                  <ImageView fx:id="imageViewSigned" fitHeight="42.0" fitWidth="33.0" layoutX="4.0" layoutY="50.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/doublecheck.png" />
                     </image>
                  </ImageView>
                  <Label fx:id="labelTime" layoutX="4.0" layoutY="6.0" prefHeight="17.0" prefWidth="76.0" text="Label" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</HBox>

EDIT: here is the working version

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="580.0" styleClass="theme-presets inbox-entry" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane prefWidth="452.0">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="350" />
          <ColumnConstraints hgrow="SOMETIMES" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints fillHeight="true" vgrow="ALWAYS" />

        </rowConstraints>
         <children>
            <Label fx:id="labelMessage" alignment="TOP_LEFT" maxHeight="Infinity" text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." wrapText="true" />
            <AnchorPane GridPane.columnIndex="1">
               <children>
                  <ImageView fx:id="imageViewEncrypted" fitHeight="33.0" fitWidth="33.0" layoutX="43.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/key.png" />
                     </image>
                  </ImageView>
                  <ImageView fx:id="imageViewSigned" fitHeight="42.0" fitWidth="33.0" layoutX="80.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/doublecheck.png" />
                     </image>
                  </ImageView>
                  <Label fx:id="labelTime" layoutX="4.0" layoutY="6.0" prefHeight="17.0" prefWidth="76.0" text="Label" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</HBox>

Answer 1

Remove the prefWidth and prefHeight attributes from the Label , and set the maxWidth attribute to Double.MAX_VALUE . This will allow the Label to grow horizontally.

Then add a fillWidth attribute to the first ColumnConstraints , which will tell the column to expand its node to fill all the space in the column. Remove all the prefWidth , minWidth and maxWidth attributes from those column constraints, to allow them to resize dynamically.

In general, hardcoding the dimensions will prevent resizing. You may need to remove other hardcoded sizes from the fxml.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="50" minWidth="-Infinity" prefWidth="580.0" styleClass="theme-presets inbox-entry" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane prefHeight="100.0" prefWidth="452.0">
        <columnConstraints>
          <ColumnConstraints hgrow="ALWAYS" fillWidth="true" />
          <ColumnConstraints hgrow="SOMETIMES" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="ALWAYS" />
        </rowConstraints>
         <children>
            <Label fx:id="labelMessage" alignment="TOP_LEFT" maxWidth="Infinity"  wrapText="true" />
            <AnchorPane  GridPane.columnIndex="1">
               <children>
                  <ImageView fx:id="imageViewEncrypted" fitHeight="33.0" fitWidth="33.0" layoutX="4.0" layoutY="23.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/key.png" />
                     </image>
                  </ImageView>
                  <ImageView fx:id="imageViewSigned" fitHeight="42.0" fitWidth="33.0" layoutX="4.0" layoutY="50.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/doublecheck.png" />
                     </image>
                  </ImageView>
                  <Label fx:id="labelTime" layoutX="4.0" layoutY="6.0" prefHeight="17.0" prefWidth="76.0" text="Label" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</HBox>