I have multiple QPushButton elements positioned next to each other. Each button has a padding of 8px on both the left and right sides. When one of them is focused, I change the background color. Currently, it looks fine:
https://i.sstatic.net/7V92N.png
Now, in addition to changing the background color, I want to add a white 2px border. However, when I do this, the text appears to be cut off due to the size of the border. With a 2px border, it looks like this:
https://i.sstatic.net/ojsnw.png
If I increase the border size to, for example, 4px, the text completely disappears because the button does not resize correctly.
In my Qt CSS, I have the following styling:
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 workaround involves setting a transparent border for the regular (non-focused) button. Upon receiving focus, the button's width seems to be calculated correctly. Although I'm not sure why Qt behaves this way, it resolves the issue for me :-)
CSS with the fix applied:
QPushButton {
background-color: transparent;
/* Define border 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;
}