[Radek]

Hi, is there a way to edit AppButton’s width? I find it’s width too small when running the app on a bigger screen, and I don’t want to insert spaces to make it bigger.

 

import Felgo 3.0
import QtQuick 2.5
import QtQuick.Controls 1.4

App {

    NavigationStack {
        splitView: false

        Page {
            title: qsTr("Bigger button")

            Column {
                anchors.left: parent.left
                anchors.right: parent.right

                Button {
                    text: "Does work"
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width * 0.3
                }

                AppButton {
                    text: "Doesn't work"
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width * 0.3
                }

                AppButton {
                    text: "                            Somewhat works                            "
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width * 0.3
                }
            }
        }
    }
}

 

[GüntherFelgo Team]

Hi Radek!

The Felgo AppButton applies a default style to the simple QML Button.
The button itself either uses a minimum width (applied for short texts) or resizes with the text and adds a horizontal padding (like when u add spaces). The final width of the button then also includes a default horizontal margin left and right of the button.

The values can be configured with the AppButton properties: horizontalPadding, horizontalMargin and minimumWidth.
Another options is to use the Theme.appButton properties to change the default values for all buttons.

import Felgo 3.0
import QtQuick 2.5
import QtQuick.Controls 1.4

App {
  id: app

  onInitTheme: {
    // general app button style settings
    Theme.appButton.height = dp(40) // default button height
    Theme.appButton.minimumWidth = dp(150) // minimum button width (if no flat button)
    Theme.appButton.flatMinimumWidth = dp(100) // minimum width if flat button style
    Theme.appButton.verticalMargin = 0 // vertical margin top and bottom of button
    Theme.appButton.horizontalMargin = 0 // horizontal margin left and right of button
    Theme.appButton.horizontalPadding = 0 // padding left and right (button to button text)
  }

  NavigationStack {
    splitView: false

    Page {
      title: qsTr("Bigger button")

      Column {
        anchors.left: parent.left
        anchors.right: parent.right

        Button {
          text: "Does work"
          anchors.horizontalCenter: parent.horizontalCenter
          width: parent.width * 0.3
        }

        AppButton {
          text: "Default"
          anchors.horizontalCenter: parent.horizontalCenter
        }

        AppButton {
          text: "Custom"
          anchors.horizontalCenter: parent.horizontalCenter

          // individual settings
          verticalMargin: dp(10)
          horizontalPadding: dp(10)
          minimumWidth: parent.width * 0.3
        }
      }
    }
  }
}

 

Best,
Günther

• This reply was modified 8 years, 3 months ago by  GT.

[Radek]

Hi Günther, thanks for the answer. I guess that’s gonna work for me, however I noticed that in your example the AppButtons width is never descreasing when you decrease apps width. Is that intended?

[GüntherFelgo Team]

Hi Radek!
Thank you for pointing that out – it is not intended! We will fix that for the next update. 😉

Best,
Günther

[Volker]

Hi Günther,

I have almost the same question and therefore do not create a new topic. But I want to make AppButton width as small as possible. Button has only icon and no text, but the width is almost 3 times the width of an icon. Setting horizontalMargin and Padding to 0 has no effect.

If I set width explicitly then I get two buttons overlapped. They are inside row together with AppTextField:

Row {
        id: inputArea
        height: dp(48)
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        spacing: 0
        padding: 0

        AppTextField {
            id: inputBox
            height: dp(48)
            width: inputArea.width - btnAttach.width - btnSend.width
            font.pixelSize: sp(16)
            backgroundColor: "white"
            verticalAlignment: Text.AlignVCenter
            onAccepted: {
                sendMessage()
            }
        }
        AppButton {
            id: btnSend
            icon: IconType.send
            horizontalMargin: 0
            horizontalPadding: 0
            onClicked: {
                sendMessage()
            }
        }
        AppButton {
            id: btnAttach            
            icon: IconType.paperclip
            onClicked: {
                attachmentDialog.open()
            }
        }
    }

 

[AlexFelgo Team]

Hi,

did you already try modifying the minimumWidth property? https://felgo.com/doc/felgo-appbutton/#minimumWidth-prop

Best,
Alex

[Volker]

Hi Alex,

thanks, this helped. I didn’t find maximumWidth and and didn’t expect this from minimumWidth 🙂

Regards,