How to center text of a button?

[Stingaaa]

When I set up the styles for my button, I tried many things like setting Text.Align and Text.AlignV to Center (I believe it also is the default setting) but the text inside the button did not get centered.
I tried to set the size of the text widget to the size of my button but this also didn't change anything.
What parameter do I need to set/ change to center the text?

Also whilst trying to set the size of the text widget to the size of the button I found out, that the text widget size is not 100% of the button, it seemed to me like the maximum size was at about 60% of the button (I can provide more details if necessary).
Is there a way to set this limitation to 100%, so that a larger text would fit in the same space than before?

[kkoreilly]

The text of the button should be centered by default, so I'm not sure what the issue is there. If you can paste in the code for your button, that would help me figure out the issue. For your second question, you might want to try s.Padding.Zero() (or s.Padding.Set(...) to whatever value you want), which might also help with the first issue.

[Stingaaa]

Thank you for the reply, it was once again so obvious, I tried almost every single option even in the App Inspector but as always I missed something.
The text now fits perfectly in the button but it still does not center.

My Button struct simply implements your *core.Button.
The following code is my current styling function:

func (b *Button) SetStyle(style *ButtonStyle) {
	b.Styler(func(s *styles.Style) {
		if style == nil {
			return
		}

		s.Gap.Set(units.Px(0))
		s.FillMargin = false
		s.Background = image.NewUniform(style.Background.Color)
		s.Opacity = style.Background.Opacity
		s.Color = image.NewUniform(style.Font.Color)
		s.Border.Radius = styles.NewSideValues(units.Px(style.Border.Radius))
		s.Padding.Zero()
		if style.Width.IsPercent && style.Height.IsPercent {
			s.Min = units.XY{X: units.Pw(style.Width.Value), Y: units.Ph(style.Height.Value)}
			s.Max = units.XY{X: units.Pw(style.Width.Value), Y: units.Ph(style.Height.Value)}
		} else if !style.Width.IsPercent && !style.Height.IsPercent {
			s.Min = units.XY{X: units.Px(style.Width.Value), Y: units.Px(style.Height.Value)}
			s.Max = units.XY{X: units.Px(style.Width.Value), Y: units.Px(style.Height.Value)}
		} else {
			panic("width and height must both be percent or both be pixels")
		}

		if style.Position.X.IsPercent && style.Position.Y.IsPercent {
			s.Pos = units.XY{X: units.Pw(style.Position.X.Value), Y: units.Ph(style.Position.Y.Value)}
		} else if !style.Position.X.IsPercent && !style.Position.Y.IsPercent {
			panic("unimplemented")
		} else {
			panic("position x and y must both be percent or both be pixels")
		}
	})

	tree.AddChildInit(b, "text", func(w *core.Text) {
		w.Styler(func(s *styles.Style) {
			s.Background = image.Transparent
			s.Color = image.NewUniform(style.Font.Color)
			// TODO: implement correct centering
			if style.Width.IsPercent && style.Height.IsPercent {
				s.Min = units.XY{X: units.Pw(100), Y: units.Ph(100)}
				s.Max = units.XY{X: units.Pw(100), Y: units.Ph(100)}
			} else if !style.Width.IsPercent && !style.Height.IsPercent {
				s.Min = units.XY{X: units.Px(style.Width.Value), Y: units.Px(style.Height.Value)}
				s.Max = units.XY{X: units.Px(style.Width.Value), Y: units.Px(style.Height.Value)}
			} else {
				panic("width and height must both be percent or both be pixels")
			}

			if style.Font.Size > 0 {
				s.Text.LineHeight.Dp(style.Font.Size)
				s.Font.Size.Dp(style.Font.Size)
			} else {
				panic("font size must be greater than 0")
			}
		})
	})
}

[kkoreilly]

Okay, the centering issue is caused by s.Display = styles.Custom; here is a simple reproducible example:

func main() {
	b := core.NewBody()
	b.Styler(func(s *styles.Style) {
		s.Display = styles.Custom
	})
	bt := core.NewButton(b).SetText("Hello")
	bt.Styler(func(s *styles.Style) {
		s.Min.X.Dp(100)
	})
	b.RunMainWindow()
}

We will work on fixing the issue now.

[Stingaaa]

Thanks for letting me know.

[kkoreilly]

We fixed this issue (#1324) in #1335, so the text should correctly center in the button now.

[Stingaaa]

Works like a charm, thanks for letting me know.