JavaFx - Text Wrapping not working on Checkbox inside VBox

Issue

I have a few UI elements that I want stacked vertically, in the center of the panel, all aligned on the left edge of the center. I've tried to do this with a VBox, and it was working until I added an item that had text that was too long; it always truncates the text with ellipsis's and I can't get it to wrap the text down to the next line. I set the wrapText param to true on the Checkbox, but it doesn't seem to respect it. I've tried setting perfWidth and maxWidth on the checkbox and the vbox it is inside of but nothing seems to work. Can anyone tell me what I am doing wrong?

Screenshot:

textwrap.fxml

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.ToggleGroup?>


<VBox xmlns:fx="http://javafx.com/fxml" maxWidth="100"
    prefHeight="200" prefWidth="300" alignment="BASELINE_CENTER" spacing="30">
    
    <VBox alignment="CENTER" maxWidth="100" prefWidth="100">
    <VBox spacing="10" style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;" alignment="BASELINE_LEFT"
        >

        <padding>
            <Insets top="0" right="0" bottom="10" left="5"/>
        </padding>
        
        <RadioButton text="Option 1">
            <toggleGroup>
                <ToggleGroup fx:id="group"/>
            </toggleGroup>
            <selected>true</selected>
        </RadioButton>
    
        <RadioButton text="Option 2">
            <toggleGroup>
                <fx:reference source="group"/>
            </toggleGroup>    
        </RadioButton>
    </VBox>
    
    <CheckBox text="My Long Textbox Text" selected="true" wrapText="true">
    </CheckBox>
    
    </VBox>
     
</VBox>

TextWrap.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class TextWrap extends Application
{

    @Override
    public void start(Stage stage) throws Exception
    {
        Parent root = FXMLLoader.load(getClass().getResource("textwrap.fxml"));
        
        Scene scene = new Scene(root, 300, 275);
    
        stage.setTitle("Text Wrap");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args)
    {
        launch();
    }

}

EDIT - as @jewelsea pointed out below, the issues was BASELINE_CENTER in the root VBox; changing that to center removed the truncation issue. This had the unintended side effect of making the outside around the radio boxes extend farther than I liked:

by adding

<maxWidth><Control fx:constant="USE_PREF_SIZE" /></maxWidth>

to the inner VBOX I was able to correct this:

I also found out, that if for some reason I was wed to BASELINE_CENTER, I could still fix the issue with the checkbox text by adding

<minWidth><Control fx:constant="USE_PREF_SIZE" /></minWidth>

to the checkbox to get the same effect.

Solution

This is what I came up with, try it and see if it is what you want.

You may need to change some things to reach your final desired layout, but hopefully this addresses your immediate wrapping issue.

I think the BASELINE_CENTER alignment on the outer VBox was confusing things, but I changed a couple of other things, so it may have been something else.

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" prefHeight="200.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/17"
      xmlns:fx="http://javafx.com/fxml/1">
    <children>

        <VBox maxWidth="100.0" prefWidth="100.0">
            <VBox alignment="BASELINE_LEFT" spacing="10"
                  style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;">

                <padding>
                    <Insets bottom="10" left="5" right="0" top="0"/>
                </padding>

                <RadioButton text="Option 1">
                    <toggleGroup>
                        <ToggleGroup fx:id="group"/>
                    </toggleGroup>
                    <selected>true</selected>
                </RadioButton>

                <RadioButton text="Option 2">
                    <toggleGroup>
                        <fx:reference source="group"/>
                    </toggleGroup>
                </RadioButton>
            </VBox>

            <CheckBox selected="true" text="My Long Textbox Text" wrapText="true">
            </CheckBox>

        </VBox>
    </children>
</VBox>

Answered By - jewelsea