CODEWITHSUNDEEP
qt5stylingqpushbuttonqtwidgets
Mr. Developerdude
Mr. Developerdude

Reputation: 9648

How to avoid text clipping for QPushButton with borderimage

I am styling a QPushButton with a border image with 28px border (for really round corners) Like so:

#MyApp QPushButton
{
    margin:0;
    padding: 0;
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

However, it seems that when the button is rendered, the text label on the button gets clipped to the inside patch of the border image. In my case this turns out disastrous:

enter image description here

How can I fix this so that the text is rendered over the entire surface of the button, including the border edges?

Upvotes: 2

Views: 543

Answers (1)

Mr. Developerdude
Mr. Developerdude

Reputation: 9648

This turned out to be simpler and more intuitive than first anticipated.

The solution was to set a negative padding on the button to the same as the border image radius like so:

#MyApp QPushButton
{
    margin:0;
    padding: -28px; /* THIS SOLVED IT */
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

Now the button looks right:

enter image description here

Upvotes: 3

Related Questions