How do I prevent a Labeled control from resizing other components when its text is changed?

Question

As the title implies, when I change the text of a javafx.scene.control.Label, it resizes all components which are contained in the same layout. How exactly do I prevent this? Here is my FXML markup:

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

<?import org.think.software.test.javafx.view.login.LoginView?>

<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?>

<?import javafx.geometry.Insets?>

<LoginView fx:controller="org.think.software.test.javafx.view.login.LoginView"
    xmlns:fx="http://think.org/software/test/javafx/login" alignment="CENTER"
    hgap="10" vgap="10">
    <padding>
        <Insets top="35" right="35" bottom="35" left="35" />
    </padding>
    <Label fx:id="infoLabel" GridPane.columnIndex="0"
        GridPane.rowIndex="0" GridPane.columnSpan="3" text="%infoLabelText" />
    <Label fx:id="usernameLabel" GridPane.columnIndex="0"
        GridPane.rowIndex="1" text="%usernameLabelText" />
    <TextField fx:id="usernameField" GridPane.columnIndex="1"
        GridPane.rowIndex="1" GridPane.columnSpan="2" promptText="%usernameFieldPromptText" />
    <Label GridPane.columnIndex="0" GridPane.rowIndex="2"
        text="%passwordLabelText" />
    <PasswordField fx:id="passwordField"
        GridPane.columnIndex="1" GridPane.rowIndex="2" GridPane.columnSpan="2"
        promptText="%passwordFieldPromptText" />
    <Button fx:id="loginButton" GridPane.columnIndex="0"
        GridPane.rowIndex="3" GridPane.columnSpan="3"
        onAction="java.lang.System.out.println(infoLabel.setText('Logging in...'));"
        text="%loginButtonText" />
</LoginView>

before text change

after text change

@Gemtastic, I learned FXML from the reference guide provided by Oracle. I defined the onAction attribute just for testing purposes. — Pavan P, Dec 30 '14 at 23:27
@Gemtastic Actually, LoginView is a class I've defined. It extends another class I've defined, View. View therefore extends GridPane. The reason for this is to prevent rewriting code, because I want all layouts for my application to to share a control "zoom" system. If that makes any sense... There is really no code to display of View/LoginView, as of now View just extends GridPane and LoginView is the controller/presenter. — Pavan P, Dec 30 '14 at 23:36
@Gemtastic Thanks for your help however that doesn't seem to work. I'm starting to come to the conclusion that #columnSpan of type GridPane might have to do with this. I'll post an answer as soon as I come with one. — Pavan P, Dec 31 '14 at 00:01

score 0 · Answer 1 · answered Dec 31 '14 at 02:50

Use some column constraints to control the expansion of the different columns.

It's not clear to me why you have the text fields spanning two columns, as there are no more than two components in any row. I would try something like:

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

<?import org.think.software.test.javafx.view.login.LoginView?>

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.ColumnConstraints?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?>

<?import javafx.geometry.Insets?>

<LoginView fx:controller="org.think.software.test.javafx.view.login.LoginView"
    xmlns:fx="http://think.org/software/test/javafx/login" alignment="CENTER"
    hgap="10" vgap="10">
    <padding>
        <Insets top="35" right="35" bottom="35" left="35" />
    </padding>
    <Label fx:id="infoLabel" GridPane.columnIndex="0"
        GridPane.rowIndex="0" GridPane.columnSpan="2" text="%infoLabelText" />
    <Label fx:id="usernameLabel" GridPane.columnIndex="0"
        GridPane.rowIndex="1" text="%usernameLabelText" />
    <TextField fx:id="usernameField" GridPane.columnIndex="1"
        GridPane.rowIndex="1" promptText="%usernameFieldPromptText" />
    <Label GridPane.columnIndex="0" GridPane.rowIndex="2"
        text="%passwordLabelText" />
    <PasswordField fx:id="passwordField"
        GridPane.columnIndex="1" GridPane.rowIndex="2" 
        promptText="%passwordFieldPromptText" />
    <Button fx:id="loginButton" GridPane.columnIndex="0"
        GridPane.rowIndex="3" GridPane.columnSpan="2"
        onAction="java.lang.System.out.println(infoLabel.setText('Logging in...'));"
        text="%loginButtonText" />

    <columnConstraints>
        <!-- left column -->
        <ColumnConstraints hgrow="NEVER" halignment="RIGHT" />
        <!-- right column -->
        <ColumnConstraints hgrow="SOMETIMES" halignment="LEFT" minWidth="150" maxWidth="600" />
    </columnConstraints>
</LoginView>

The values for minWidth and maxWidth are just examples; you can experiment with those (or possibly omit them entirely). You can also try hgrow="ALWAYS" for the right column, depending on the exact behavior you want.

How do I prevent a Labeled control from resizing other components when its text is changed?

1 Answers1