Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › AppButton width

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #12160

    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
                    }
                }
            }
        }
    }
    

     

    #12166

    Günther
    Felgo 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 5 years, 8 months ago by  GT.
    #12204

    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?

    #12206

    Günther
    Felgo Team

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

    Best,
    Günther

    #24387

    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()
                }
            }
        }

     

    #24389

    Alex
    Felgo Team
    #24390

    Volker

    Hi Alex,

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

    Regards,

     

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded