Skip to content

ToggleSwitch thumb goes outside track boundary #153

@jamhour1g

Description

@jamhour1g

When styling ToggleSwitch with custom colors, the thumb knob does not stay within the background (track) boundary. Instead, it overflows outside the rounded track.

Expected Behavior:

  • Thumb knob should remain centered inside the track’s rounded boundaries.
  • Thumb should slide left → right within the track without overflowing.
<?import atlantafx.base.controls.ToggleSwitch?>
<ToggleSwitch fx:id="togglePrayerNotifications" alignment="CENTER"
         contentDisplay="GRAPHIC_ONLY" prefHeight="20.0"
         prefWidth="70.0" styleClass="toggle-switch">
  <padding>
      <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
  </padding>
</ToggleSwitch>
/* ---------- ToggleSwitch (custom colors) ---------- */
.toggle-switch {
    -fx-background-color: -color-primary;
    -fx-background-radius: 25px;
}

/* Thumb (knob) */
.toggle-switch .thumb {
    -fx-background-color: -color-primary, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 50%;
    -fx-padding: 0.85em;
    -fx-alignment: CENTER;
    -fx-opacity: 0.9;
}

The knob sliding out of the bound of the shape

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions