Button not filling Rectangle

Bilal_Khan

I want the button's height to be matched with rectangle's height but there is a space remaining while console showing same height for both components: (I have tried different methods but the result is same)

Rectangle {
            color: "red"
            width: 50
            height: 30

            Component.onCompleted:  console.log(height, er.height)    // 30, 30

            Button {
                id: er
                text: "OK"
                anchors.fill: parent
            }
        }

Note: Actually I need to give background to row-of-buttons but with not so much space in rectangle and the row ..

J.Hilk

@Bilal_Khan

what version of QtQuick.Controls are you using ? because with 2.15 I get

not the really big borders top and bottom that you get, but still with border (1 px around ), I'm not sure where that is from

but you can get around it by adding

anchors.margins: -1

to your button

Bilal_Khan

Thanks @J-Hilk . Sorry I forgot to mention that I am using "Material" and by removing this line I get the desired result:

 QQuickStyle::setStyle("Material");

Why material button is behaving like that? and how to get around this problem?

J.Hilk

@Bilal_Khan I'm not entirely sure, but I think one of the features of material style (buttons) is the adjustment of the hight in relation to the font size

Soheil

It's because the material style sets non-zero values for xxxInset properties.

Set leftInset, rightInset, topInset, bottomInset values to 0 and the button appears to fill its parent.