Increase space between text and checkbox in Qt

Question

If you set a fixed checkbox size, the text will be aligned to the checkbox itself. With the standard layout direction, the text will start right after the box, and with right-to-left layout it will end right before the box, just like this (the border is just the widget's border to indicate the widget/s real size, don't be confused):

Is there a way to align the text to the other side to achieve this:

enter image description here

Why don't you just create checkbox without any text and add label to this, which you can align wherever you want? — Blood, Sep 26 '12 at 08:53
@Blood: (Probably depending on the Style), the normal behaviour of a checkbox is that you can also click the label to toggle the checkbox. So you would need at least some additional code for that. — Andreas Fester, Sep 26 '12 at 09:04
@Andreas, yes, that's one reason. The other is that my checkboxes will be dynamically-positioned, and positioning checkboxes and the corresponding labels separately is annoying — SingerOfTheFall, Sep 26 '12 at 09:14

score 9 · Accepted Answer · answered Sep 26 '12 at 08:56

9

As you mentioned you have a fixed size QCheckBox. So easily without subclassing you can get to your desire QCheckBox using style sheets. But unfortunately text-align property just works for QPushButton and QProgressBar. But the alternate stylesheet that you can use is :

QCheckBox{
spacing:100px;
}

With RightToLeft direction for your QCheckBox and this style sheet your checkbox is ready! :) . Change spacing according to your application.
Hope this helps.
here is my output

answered Sep 26 '12 at 08:56

s4eed

7,173
9
67
104

1

Thanks, that's a great solution if combined with `QFontMetrics`: `int width = box->fontMetrics().width(str); QString spacing = "QCheckBox{spacing:%1px}"; box->setStyleSheet( spacing.arg(box->width() - width - 25) );` – SingerOfTheFall Sep 26 '12 at 09:18

DeadWarlock · Answer 2 · 2012-09-26T08:48:27.670

You can try inherit from QCheckBox and draw what you want. Look to this example custom push_button (add shadow to the text on the button).

#include "CustomButton.h"
#include <QStylePainter>
#include <QStyleOptionButton>
#include <QMenu>


CustomButton::CustomButton(QWidget *parent):
    QPushButton(parent)
{
}

void CustomButton::paintEvent(QPaintEvent *event)
{
    QStylePainter p(this);
    QFontMetrics font = this->fontMetrics();

    QRect textRect = font.boundingRect(text());
    int x = rect().center().x()-textRect.center().x();
    int y = rect().center().y()-textRect.center().y();
    ++y;
    p.drawControl(QStyle::CE_PushButton, getStyleOption()); //draw button with stylesheet
    QStyleOptionButton opt = getStyleOption();
    opt.text = text();
    QPen tempPen = p.pen();
    p.setPen(Qt::white);
    p.drawText(x, y,  text()); //draw text shadow on the button
    p.setPen(tempPen);
    p.drawControl(QStyle::CE_PushButtonLabel, opt); //draw text with stylesheet 
    //QPushButton::paintEvent(event);
}

QStyleOptionButton CustomButton::getStyleOption() const
{
    QStyleOptionButton opt;
    opt.initFrom(this);
    opt.features = QStyleOptionButton::None;
    if (isFlat())
        opt.features |= QStyleOptionButton::Flat;
    if (menu())
        opt.features |= QStyleOptionButton::HasMenu;
    if (autoDefault() || isDefault())
        opt.features |= QStyleOptionButton::AutoDefaultButton;
    if (isDefault())
        opt.features |= QStyleOptionButton::DefaultButton;
    if (isDown() || (menu() && menu()->isVisible()))
        opt.state |= QStyle::State_Sunken;
    if (isChecked())
        opt.state |= QStyle::State_On;
    if (!isFlat() && !isDown())
        opt.state |= QStyle::State_Raised;
    //opt.text = text();
    opt.icon = icon();
    opt.iconSize = iconSize();

    return opt;
}

Increase space between text and checkbox in Qt

2 Answers2