Qt CSS border + padding seems to cut off text

Question

I have several QPushButtons that are located beside each other. Each button has a padding of 8px on the left and the right side. When one of them has focus I change the background-color. So far it looks fine:

In addition to the background-color change I want to apply a border of 2px in white. When I do that the text seems to be cut off by the size of my border. So with a border of 2px it looks like this:

When I increase the border-size to, for example, 4px my text vanishes completely because the button does not increase it's size correctly.

I use the following CSS in Qt:

QPushButton {
    background-color: transparent;
    border-style: none;
    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}

QPushButton:focus {
    background-color: blue;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

Edit, Solution from Rushi: The idea is to define the border for the original (non-focused) button with a transparent color. When it receives focus the width of the button seems to be computed correctly. I don't know why Qt computes it correctly in this case, but it works for me :-)

CSS with the fix:

QPushButton {
    background-color: transparent;

    /* we define our border here but with transparent color */
    border-style: solid;
    border-width: 2px;
    border-color: transparent;

    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}

QPushButton:focus {
    background-color: blue;
    border-color: white;
}

It's not clear for me why do you use pading? Maybe you should use margin? — Evgeny
@Evgeny: margin adds space outside the content and outside the border. Using margin makes the focus highlight smaller. What I want is make the button including the highlight a custom size so I need to use padding. — FrozenTarzan

Unknown Unknown · Accepted Answer · 2016-01-08T10:02:35

Hello Please check below html and css code ,it will be help you to solved this issue.

<html>
    <head>
        <title>title</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .box{ background: #000; width: 400px; height: 100px; margin: 50px;  padding: 50px;}
            .QPushButton {
    background-color: transparent;
    font: bold 12px;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
     border-style: solid;
    border-width: 2px;
    border-color: transparent;

}

.QPushButton:focus {
    background-color: blue;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}
        </style>
    </head>
    <body>
        <div class="box">
            <a href="#" class="QPushButton">3</a>
            <a href="#" class="QPushButton">4</a>
        </div>
    </body>
</html>

Qt CSS border + padding seems to cut off text

2 Answers