[Lorne]

I’ve got a fairly simple problem.  I have two buttons that are vertically stacked in a ColumnLayout (code is below).  The text is different and I want both buttons to have the same width.  How would I do that?  I can’t seem to find a watch to make the width of a button to be controlled by anything other than the width of the text.

ColumnLayout {
  id: column

  AppButton {
    text: qsTr("short text");
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
  }

  AppButton {
    text: qsTr("much much longer text");
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
  }
}

 

[Marcin]

Hi,
I didn’t use this element too much but from quick look at documentation I see something like minimumWidth.
Would that help in your case? If you set minimum width on buttons, where minimum width would be dictated by button with longer text.

[GüntherFelgo Team]

Hi!

The total AppButton width is calculated based on the text size, as well as padding and margin settings. As Marcin concluded, you can use the minimumWidth setting to increase the button width for a shorter text.

[Lorne]

I’ve used minimumWidth, but using a static number doesn’t work.  The width will be different depending on device/screen size.  I also tried to set the minimum width in the Component.onCompleted() signal, but the size of the buttons have not bee calculated at that point.  Is there a signal I can hook into once the size of the button has been fully calculated once it’s been put out on the screen?

[GüntherFelgo Team]

Hi Lorne!

You can specify a density-independent width by using the app.dp() function. The buttons then have the same width across all devices.

If you want to specify different sizes for e.g. phone vs. tablet, you can do so by checking e.g. app.tablet and choosing an appropriate width then.

Best,
Günther