RoundButton not taking correct height setting

JoeCFD

@mzimmers said in RoundButton not taking correct height setting:

height: r1.height

change
height: r1.height
to
implicitHeight: r1.height
will do it.

Setting the implicit size is useful for defining components that have a preferred size based on their content.

mzimmers

@JoeCFD said in RoundButton not taking correct height setting:

change
height: r1.height
to
implicitHeight: r1.height
will do it.

I assume that change was for the RowLayout, as that's the only place with that exact line of code. It didn't change anything. If I make that change to b1 as well, b1 then looks like b2, which isn't what I want.

Setting the implicit size is useful for defining components that have a preferred size based on their content.

But in this case, I want to dictate the size (height) of the button. I want it to be exactly half the height of the rectangle in which it's being placed. That's why I'm not sure implicit sizes are appropriate here.

JoeCFD

@mzimmers change all of them. I tested the change. They are all 30

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: mainWindow
    width: 1024
    height: 768
    visible: true

    ColumnLayout {
        Rectangle {
            id: r1
            height: 60
            width: mainWindow.width
            color: 'red'

            RowLayout {
                id: rowLayout

                Button {
                    id: b1
                    implicitHeight : r1.height / 2
                    text: b1.height
                }
            }
        }

        Rectangle {
            id: r2
            height: 60
            width: mainWindow.width
            color: 'blue'
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            Button {
                id: b2
                implicitHeight: r2.height / 2
                text: b2.height
            }
        }

        Button {
            id: b3
            implicitHeight: r2.height / 2 // just borrowing the height from r2.
            text: b3.height
        }
    }
}

mzimmers

@JoeCFD they say 30, but they are not half the height of the rectangles I'm placing them in:

That is what I'm trying to fix (plus another problem I'll bring up later).

Thanks...

JoeCFD

@mzimmers what do you mean?
r1 height is 60
b1 height is 60 / 2 = 30
my display of the button has the half height.

mzimmers

@JoeCFD look at my picture. The buttons don't look anywhere near half the height of the rectangles. From eyeballing it, it looks more like 1/3 the height.

EDIT:

Using a background seems to fix it (sort of). Let me play with this and I'll report back.

JoeCFD

@mzimmers

mzimmers

@JoeCFD interesting. I wonder why yours doesn't look like mine. What's your platform and style?

JoeCFD

@mzimmers Qt 5.15.2 on Ubuntu 18. Maybe try also
implicitHeight: 60

mzimmers

@JoeCFD interesting...the problem appears to be specific to the Material style. Applying a background makes it better (though it still doesn't look quite right).

EDIT: I also discovered that the Material style isn't displaying the icon correctly. I'm going to close this topic and open a new one.