Skip to content

Wrong text alignment on a button if size is set #104

@andrew-vos

Description

@andrew-vos

If I have my button defined like this:

file_type: resources

resources:

  btn_main_menu:
    type: template

    slots:
      btn_text: "btn_main_menu"

    template:
      type: button
      padding: 0
      content:
        type: text
        size: { w: 184, h: 43 }
        alignment: { h: center, v: center }
        text: $btn_text
          text_style: text_style_btn_main_menu
      background: ~spr_start_page_button_default

The text alignment doesn't work well, it's always shifted a bit:

Image

However things work well once I disable the size and set only horizontal alignment (if I add vertical alignment things get weird):

type: button
      padding: [10, 10]
      //  size: { w: 184, h: 43 }
      content:
        type: text
        alignment: { h: center  }
        text: $btn_text
          text_style: text_style_btn_main_menu
      background: ~spr_start_page_button_default

FYR the panel that hosts buttons looks like this:

- type: panel_main_menu
      size: { w: 231, h: 287 }
      layout: vertical
      padding: 15
      spacing: 10
      alignment: { h: stretch }
      canvas:
        bottom: 150
        center: h
      border_color: $theme.resources.control_border // DEBUG
      elements:
        - type: btn_main_menu
          btn_text: ~str('menu.button.start_game')
          on_click: @@ e => ~ui_start_game_from_main_menu()

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