I'm trying to have a multi-line checkbox/radiobutton with Qt using standard QCheckbox/QRadioButton.

I didn't find the direct solution since QRadioButton{wrap:true;} has no effect. The only thing possible would be to access to the QRadioButton->label->setLineWrap(true) but

  1. I'd like to do that from the designer
  2. not having to rewrite a widget

Any idea beside putting a QRadioButton and a QLabel next to each others?

Thx, Boris.

share|improve this question

My solution:

#ifndef CHECKBOX_H
#define CHECKBOX_H

#include <QCheckBox>

#include <QHBoxLayout>
#include <QLabel>

class CheckBox : public QCheckBox
{
    Q_OBJECT
public:
   explicit CheckBox(QWidget *parent = 0);

   void setText(const QString & text);
   QSize sizeHint() const;
   bool hitButton(const QPoint &pos) const;

protected:
   void paintEvent(QPaintEvent *);

private:
   QHBoxLayout* _layout;
   QLabel*      _label;
};

#endif // CHECKBOX_H




#include "checkbox.h"

#include <QStylePainter>
#include <QStyleOption>

#define MARGIN 4 // hardcoded spacing acording to QCommonStyle implementation

CheckBox::CheckBox(QWidget *parent) : QCheckBox(parent)
{
    setSizePolicy(QSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred, QSizePolicy::CheckBox));

    QStyleOptionButton opt;
    initStyleOption(&opt);

    QRect label_rect = style()->subElementRect(QStyle::SE_CheckBoxContents, &opt, this);

    _label = new QLabel(this);
    _label->setWordWrap(true);
    _label->setMouseTracking(true);
    //_label->setMinimumHeight(label_rect.height());

    _layout = new QHBoxLayout(this);
    _layout->setContentsMargins(label_rect.left()+MARGIN, MARGIN/2, MARGIN/2, MARGIN/2);
    _layout->setSpacing(0);
    _layout->addWidget(_label);

    setLayout(_layout);
}

void CheckBox::setText(const QString & text)
{
    _label->setText(text);
    QCheckBox::setText(text);
}

void CheckBox::paintEvent(QPaintEvent *)
{
    QStylePainter p(this);
    QStyleOptionButton opt;
    initStyleOption(&opt);

    QStyleOptionButton subopt = opt;
    subopt.rect = style()->subElementRect(QStyle::SE_CheckBoxIndicator, &opt, this);
    subopt.rect.moveTop(opt.rect.top()+MARGIN/2); // align indicator to top

    style()->proxy()->drawPrimitive(QStyle::PE_IndicatorCheckBox, &subopt, &p, this);

    if (opt.state & QStyle::State_HasFocus)
    {
        QStyleOptionFocusRect fropt;
        fropt.QStyleOption::operator=(opt);
        fropt.rect = style()->subElementRect(QStyle::SE_CheckBoxFocusRect, &opt, this);
        style()->proxy()->drawPrimitive(QStyle::PE_FrameFocusRect, &fropt, &p, this);
    }
}

QSize CheckBox::sizeHint() const
{
    return QSize(); // will be calculated by layout
}

bool CheckBox::hitButton(const QPoint &pos) const
{
    QStyleOptionButton opt;
    initStyleOption(&opt);
    return opt.rect.contains(pos); // hit all button
}
share|improve this answer

I succeeded adding a layout and a label as a child for the radio button, and changing the vertical size policy to Preferred (instead of Fixed).

Unfortunately this didn't automatically make it react to the mouse hovers and clicks like the native label, but watch a hack: I setStyleSheet("border:none") for the radio button and it started working. Maybe that's some feature happening behind the scenes; I'd love to have some certainty.

And the indicator can be aligned using "QRadioButton::indicator{subcontrol-position:top left}" <- http://doc.trolltech.com/qq/qq20-qss.html

share|improve this answer

That indeed is really annoying and cannot be solved without reimplementation: the label uses Qt::PlainText if I'm not mistaken. In our projects, the UI team solved this with two approaches.

Using the QRadioButton button as a title

Layout using the QRadioButton as a title http://i48.tinypic.com/97prtl.png

Rewrite the QRadioButton text in such a fashion that it has only a brief description of the option. Put a QLabel underneath it and add a longer description. We use a smaller font and a little indentation to make it look neat. This is used frequently in Mac OS X, for example.

Removing the text from the radio button

Layout using buddy labels http://i46.tinypic.com/wwhrgh.png

Relayout the UI so that each radio button is put on the left of a QLabel. Add the whole text to the QLabel and set the label as the radio buttons' buddy. This is the least functional approach, because clicking the label does not check the radio button. Also, alignment is not very good.

share|improve this answer
    
Thanks for your answer. I solved my issue with the 2nd solution you explained. This is not very good in the layout but works... I really hope Qt will solve this issue in a close future! Thanks again anyway. – Boris Gougeon Dec 7 '09 at 11:09

The only way I know (but it's not "layoutable") is putting \n sign into a string.

share|improve this answer
    
This works in Qt 5.6 – jtooker Sep 29 '16 at 14:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.