QPushButton Don't Use Text Displacement on Button Checked

Question

I'm creating my own QPushButton and styling it up. What I've noticed happening is the text slightly displacing if the button is pushed and checked (hardly surprising, as this is making it look like a button). I don't want this to happen though. I've tried looking through the style-sheet properties I can change to suppress this behaviour, but with no luck. Is there a way in which I can achieve this?

Here is the button in the two states. If superimposed or viewed one after the other in an image viewer, you can see the text displacement.

Here is the relevant code:

#include "ModeButton.h"

// The RGB colour codes that we use to help create our dynamic stylesheets. Longer term the colour codes may be moved to a global colour file
const QString ModeButton::m_rgbModeButtonEnabledBorder     = QString("rgb(102, 102, 102)");
const QString ModeButton::m_rgbModeButtonEnabledBackground = QString("rgb(153, 153, 153)");
const QString ModeButton::m_rgbModeButtonEnabledText       = QString("rgb(102, 102, 102)");
const QString ModeButton::m_rgbModeButtonDisabledBorder    = QString("rgb(82, 82, 82)");
const QString ModeButton::m_rgbModeButtonDisabledText      = QString("rgb(82, 82, 82)");
const QString ModeButton::m_rgbModeButtonCheckedText       = QString("rgb(0, 0, 0)");
const QString ModeButton::m_rgbModeButtonCheckedBackGround = QString("rgb(255, 153, 51)");

// We dynamically create our stylesheets so that we can separate out the colour from the rest of the styling
const QString ModeButton::m_styleSheetEnabledTemplate  = QString("QPushButton { color: TEXT_RGB; border: 0px solid BORDER_RGB; border-radius: 7px; background-color: BACKGROUND_RGB; }");
const QString ModeButton::m_styleSheetDisabledTemplate = QString("QPushButton:disabled { border: 0px solid BORDER_RGB; color: TEXT_RGB; }");
const QString ModeButton::m_styleSheetCheckedTemplate  = QString("QPushButton:checked { color: TEXT_RGB; border: 0px solid BORDER_RGB; border-radius: 7px; background-color: BACKGROUND_RGB; }");

ModeButton::ModeButton(OperatingModeButtonType a_OperatingModeButtonType, ChannelContainerWidget* ParentContainer, bool DoubleChanneled, int RowSpan)
  : QPushButton(GetOperatingModeButtonLabel(a_OperatingModeButtonType), (QWidget*)ParentContainer),
  m_OperatingModeButtonType(a_OperatingModeButtonType),
  m_DoubleChanneled(DoubleChanneled),
  m_RowSpan(RowSpan)
{
    ModifyStyle();
    setCheckable(true);
    setFixedWidth(-1);
}

//-----------------------------------------------------------------------------

QString ModeButton::GetEnabledStyleSheetString()
{
    QString styleSheetString = m_styleSheetEnabledTemplate;

    styleSheetString.replace("TEXT_RGB", m_rgbModeButtonEnabledText);
    styleSheetString.replace("BORDER_RGB", m_rgbModeButtonEnabledBorder);
    styleSheetString.replace("BACKGROUND_RGB", m_rgbModeButtonEnabledBackground);

    return styleSheetString;
}

//-----------------------------------------------------------------------------

QString ModeButton::GetDisabledStyleSheetString()
{
    QString styleSheetString = m_styleSheetDisabledTemplate;

    styleSheetString.replace("TEXT_RGB", m_rgbModeButtonDisabledText);
    styleSheetString.replace("BORDER_RGB", m_rgbModeButtonDisabledBorder);

    return styleSheetString;
}

//-----------------------------------------------------------------------------

QString ModeButton::GetCheckedStyleSheetString()
{
    QString styleSheetString = m_styleSheetCheckedTemplate;

    styleSheetString.replace("TEXT_RGB", m_rgbModeButtonCheckedText);
    styleSheetString.replace("BORDER_RGB", m_rgbModeButtonEnabledBorder);
    styleSheetString.replace("BACKGROUND_RGB", m_rgbModeButtonCheckedBackGround);

    return styleSheetString;
}

//-----------------------------------------------------------------------------

void ModeButton::ModifyStyle()
{
    setStyleSheet(GetEnabledStyleSheetString() + GetDisabledStyleSheetString() + GetCheckedStyleSheetString());
}

///////////////////////////////////////////////////////////////////////////////

You could show an image that shows the error. Its code is difficult to reproduce. could activate the flat: `setFlat(true)` — eyllanesc, Feb 07 '18 at 16:14
If you can't fix it, I recommend (as a workaround) to override paintEvent and draw the button yourself, with QStyle and QStyleOptionButton. Just draw only the background and the text afterwards yourself. — Johannes Schaub - litb, Feb 07 '18 at 16:16
As a random guess, have you tried the `:pressed` pseudo-state with a negative left padding value? That sounds like it should undo the jumping if the button is pressed down. — Johannes Schaub - litb, Feb 07 '18 at 16:23
@eyllanesc Now uploaded the images as well. setFlat(true) doesn't do it unfortunatelly. — Claudiu, Feb 07 '18 at 16:29
the image is not very descriptive, I do not see the displacement, to be able to help I need a [mcve], and its code is not. — eyllanesc, Feb 07 '18 at 16:30
I'm even thinking that it's the visual effect of changing colors, an optical illusion. — eyllanesc, Feb 07 '18 at 16:31
@eyllanesc If you open the two images in two separate browser tabs and switch between them, you should see the displacement. — Claudiu, Feb 07 '18 at 16:32
@JohannesSchaub-litb Your suggestion helped me fix it! I started playing around with the padding values of the :pressed state of the qpushbutton and noticed it was making a difference. I then asked myself what would happen if I'd set the same padding for both the enabled and the checked states. I set them both to 0 and the problem went away completely. I believe this is because the default padding values are different; that's probably how the displacement is achieved by default. — Claudiu, Feb 07 '18 at 16:48

score 0 · Accepted Answer · answered Feb 07 '18 at 16:52

Setting both the m_styleSheetEnabledTemplate's and the m_styleSheetCheckedTemplate's padding properties to 0 fixes my problem. I believe the default padding values are different and that's how the text displacement is actually achieved. Thank you @JohannesSchaub-litb for the suggestion to try the padding property.

QPushButton Don't Use Text Displacement on Button Checked

1 Answers1