Vertex
Vertex

Reputation: 2712

How to align a label and button at baseline?

Id like to place a label and a button (and a text field) in a horizontal layout. This works, but the baselines are unaligned. How to fix that?

Baselines are unaligned

The expected result is that the red lines (baselines of each control) are at the same height.

This is the FXML:

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>

<HBox prefHeight="100.0" prefWidth="400.0" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label text="Label" />
      <Button mnemonicParsing="false" text="Button" />
      <TextField text="Lorem Ipsum" />
   </children>
</HBox>

Upvotes: 2

Views: 2222

Answers (1)

James_D
James_D

Reputation: 209330

Add an alignment attribute to the HBox with value "BASELINE_LEFT":

<HBox alignment="BASELINE_LEFT" prefHeight="100.0" prefWidth="400.0" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label text="Label" />
      <Button mnemonicParsing="false" text="Button" />
      <TextField text="Lorem Ipsum" />
   </children>
</HBox>

enter image description here

Upvotes: 6

Related Questions