A method to algn JavaFX checkbox label text with t

Question

I have a plain CheckBox in an FXML file on the same line as some other controls and labels in a HBox.

The checkBox label text-base is about 6px units lower than ALL the other text and labels on the same line (HBox).

I can manually line things up in SceneBuilder by specifying a padding-bottom value of: 6. I wanted to put that into the CSS so all checkbox labels would be "lined-up", but everthing I've tried is ignored and doesn't show in the CSS Analyzer (too).

I looked through the Checbox default styling as pointed out here:

• Styling a checkbox and also:
• Checkbox in the UI controls

I had similar issues with ListBox where the control is constructed from a number of components. You have to know which 'thing' is relevant. However, looking through: com/sun/javafx/scene/control/skin/

• caspian/caspian.css

I can't pick the component that makes the text label lower than other text on the same line/row. Add to that, the fact that specifying the padding in the SceneBuilder designer layout, will fix the issue on a one-by-one (manual) basis, it just seems strange that it won't work for:

.check-box {
    padding-bottom: 6px;  /* or just 6  */
}

Does not work on the following FXML mark-up.

  <HBox alignment="CENTER_LEFT" >
     <children>
        <CheckBox fx:id="acknowledged" alignment="TOP_LEFT" styleClass="normal" text="00">
           <padding>
              <Insets bottom="6.0" left="4.0" right="8.0" />
           </padding>
        </CheckBox>
        <Button fx:id="detailButton" text="%alarm.detail.label" />
        <Label fx:id="alarmType" styleClass="normal" text="%alarm.type.value">
           <padding>
              <Insets left="8.0" right="8.0" />
           </padding>
        </Label>
     </children>
  </HBox>

The objective is to define the padding-bottom via CSS rather than have to do it manually in the FXML:

    <padding>
         <Insets bottom="6.0" left="4.0" right="8.0" />
   </padding>

Any ideas?

To be clear, the visual result for this row is that the checkbox itself has a base-line smaller/lower than the other elements (button, label). The CheckBox label is also subsequently "below" the other elements. If we can pad using CSS, then we don't need to manually maintain the layouts.

Answer 1

As a general rule, alignment problems should be solved by the layout (vs. tweaking paddings or such). So first stop to a solution could be the doc of the parent pane, here HBox:

The alignment of the content is controlled by the alignment property, which defaults to Pos.TOP_LEFT.

That might be consistent with what you are be seeing (can't be 100% certain, though, as you forgot to include a runnable example ;-) If all other components on the line are accidentally being same height or filling the box with the checkbox smaller, it will positioned at the top of the pane.

Assumed solution is to change the pane's alignment to BASELINE_XX, quick check in code works fine for me:

private Parent getContent() {
    HBox box = new HBox(new TextField("something"), 
            new CheckBox("soso"), new Button("hello"));
    box.setAlignment(Pos.BASELINE_CENTER);
    return box;
}