How to align Labels with different Text sizes to Botttom? - javafx

Question

I have two different Labels, one large one which displays a changing text and a smaller one which displays a % sign, and has to be smaller.
I have these two in a GridPane and aligned the left text to BOTTOM_RIGHT and aligned the right text BOTTOM_LEFT, so there is no gap in between:
How can I get the two texts to align so they look like the following image?
In hindsight, a TextFlow would have been a better solution, but I'm much too far into my project to change this now.

Answer 1

This depends on how you've built your Scene. If you're using FXML/Scene Builder, you'd set the valignment property for your GridPane row to BASELINE.
Here's a complete FXML that replicates your screenshots (without styling):
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="-Infinity" valignment="BASELINE" vgrow="SOMETIMES"/>
</rowConstraints>
<children>
<Label style="-fx-font-size: 5.0em;" text="44"/>
<Label style="-fx-font-size: 3.0em;" text="\%" GridPane.columnIndex="1"/>
</children>
</GridPane>
If you're designing the Scene in Java, the end goal is the same: set the valignment of the row to BASELINE:
import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;
public class TextAlignSample extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
// Simple Interface
GridPane root = new GridPane();
RowConstraints constraints = new RowConstraints(
Region.USE_PREF_SIZE,
Region.USE_COMPUTED_SIZE,
Region.USE_COMPUTED_SIZE);
constraints.setValignment(VPos.BASELINE);
root.getRowConstraints().add(constraints);
// Add our Labels
root.add(new Label("44") {{
setStyle("-fx-font-size: 5.0em");
}}, 0, 0);
root.add(new Label("%") {{
setStyle("-fx-font-size: 3.0em");
}}, 1, 0);
// Show the stage
primaryStage.setScene(new Scene(root));
primaryStage.setTitle("TextAlignSample Sample");
primaryStage.show();
}
}
The Result:
Sorry for the odd color; something is wrong with my screen cap software