put 2 radiobuttons in one column without overlapping JavaFX

Question

I wanted to ask for help with one problem. I want to move two radio button in one column so that they will both take only as much space as textbox above them. How can I do this? Here is the code and screenshot of current improper version:

Please do not flag my question as duplicate if you are not 100% sure, ok? It is not nice to have your question flag as duplicate of other question, go to this other one and finds out that only common thing is that they are both about programming.

 GridPane formGrid = new GridPane();
    formGrid.setPadding(new Insets(5,5,5,5));
    formGrid.setVgap(6);
    formGrid.setHgap(4);

    //first row
    Label nameLabel = new Label("Name");
    GridPane.setConstraints(nameLabel, 0, 0);

    TextField nameInput = new TextField();
    GridPane.setConstraints(nameInput, 1, 0);

    Label ageLabel = new Label("Age");
    GridPane.setConstraints(ageLabel, 2, 0);

    TextField ageInput = new TextField();
    GridPane.setConstraints(ageInput, 3, 0);

    //secondRow
    Label colourLabel = new Label("Colour");
    GridPane.setConstraints(colourLabel, 0, 1);

    TextField colourInput = new TextField();
    GridPane.setConstraints(colourInput, 1, 1);

    Label genderLabel = new Label("Gender");
    GridPane.setConstraints(genderLabel, 2, 1);

    ToggleGroup pickGender = new ToggleGroup();

    RadioButton pickMale = new RadioButton("Male");
    pickMale.setToggleGroup(pickGender);
    pickMale.setSelected(true);
    GridPane.setConstraints(pickMale, 3, 1, 1, 1);

    RadioButton pickFemale = new RadioButton("Female");
    pickFemale.setToggleGroup(pickGender);
    GridPane.setConstraints(pickFemale, 4, 1, 1, 1);


    //third row
    Label typeLabel = new Label("Type");
    GridPane.setConstraints(typeLabel, 0, 2);
    //combobox
    ComboBox<String> typeBox = new ComboBox<>();
    GridPane.setConstraints(typeBox, 1, 2);

    Label breedLabel = new Label("Breed");
    GridPane.setConstraints(breedLabel, 2, 2);

    TextField breedInput = new TextField();
    GridPane.setConstraints(breedInput, 3, 2);

    //fourth row
    Label categoryLabel = new Label("Category: ");
    GridPane.setConstraints(categoryLabel, 0, 3);

    ToggleGroup pickCategory = new ToggleGroup();

    RadioButton pickLost = new RadioButton("Lost");
    pickLost.setToggleGroup(pickCategory);
    pickLost.setSelected(true);
    GridPane.setConstraints(pickLost, 1, 3);

    RadioButton pickFound = new RadioButton("Found");
    pickLost.setToggleGroup(pickCategory);
    GridPane.setConstraints(pickFound, 2, 3);

    RadioButton pickAdoption = new RadioButton("Adoption");
    pickLost.setToggleGroup(pickCategory);
    GridPane.setConstraints(pickAdoption, 3, 3);

    //fifth row
    Label descriptionLabel = new Label("Description");
    GridPane.setConstraints(descriptionLabel, 0, 4);

    TextArea descriptionInput = new TextArea();
    GridPane.setConstraints(descriptionInput, 1, 4, 2, 1);



    formGrid.getChildren().addAll(nameLabel, nameInput, ageLabel, ageInput);
    formGrid.getChildren().addAll(colourLabel, colourInput, genderLabel, pickMale, pickFemale);
    formGrid.getChildren().addAll(typeLabel, typeBox, breedLabel, breedInput, categoryLabel);
    formGrid.getChildren().addAll(pickLost, pickFound, pickAdoption, descriptionLabel, descriptionInput);

James_D · Answer 1 · 2016-04-06T13:50:03.013

Think of it the other way around. The "Female" radio button is in column 4, and so it is to the right of anything in column 3. Column 3 is being forced to be wide enough to hold the two text fields, which is what is forcing that radio button so far to the right. If you want the text fields to span the same horizontal space as the two radio buttons, let them use both the columns the radio buttons occupy: i.e. let the text fields span columns 3 and 4.

TextField ageInput = new TextField();
GridPane.setConstraints(ageInput, 3, 0, 2, 1);

TextField breedInput = new TextField();
GridPane.setConstraints(breedInput, 3, 2, 2, 1);

Now columns 3 and 4 contain those two text fields, column 3 contains the "Male" radio button, and column 4 contains the "Female" radio button.

I'm not sure if everything you posted is the whole form, but you might also want to increase the column span of the text area to make it work nicely:

GridPane.setConstraints(descriptionInput, 1, 4, 4, 1);

With those changes I get

(If it's important to you, you can avoid the "Female" check box from being pushed to the right by also setting the column span of the "Adoption" check box to 2.)

Another option is (starting with your original code) to wrap the two radio buttons in a HBox, and place the HBox in the grid pane instead of the radio buttons:

RadioButton pickMale = new RadioButton("Male");
pickMale.setToggleGroup(pickGender);
pickMale.setSelected(true);

RadioButton pickFemale = new RadioButton("Female");
pickFemale.setToggleGroup(pickGender);

HBox genderButtons = new HBox(4, pickMale, pickFemale);
GridPane.setConstraints(genderButtons, 3, 1);

// ...

formGrid.getChildren().addAll(colourLabel, colourInput, genderLabel, genderButtons);

However, I prefer the previous approach. (Your mileage may vary.)

put 2 radiobuttons in one column without overlapping JavaFX

1 Answers1