Issue with QPushButton text horizontal clipping

[joeQ]

@ajaxcrypto Hi,friend. Welcome.

could you show what text of your button ? and maybe the width of text is bigger than button's width.

It is better to show some code snippet at here. we would clear it well.

[ajaxcrypto]

I am using Qt 5.9.0, MSVC 2015 on Windows 10 Enterprise. Sadly it is also producible with MinGW builds

QFrame frame;
    frame.setLayout(new QHBoxLayout);
    frame.layout()->addWidget(new QPushButton{ "TestButton", &frame });
    frame.layout()->addWidget(new QPushButton{ "TestButton", &frame });
    frame.layout()->addWidget(new QPushButton{ "TestButton", &frame });
    frame.setStyleSheet(
                "QWidget > QPushButton { padding: 5px; border: none; background-color: white; font-size: 9pt; }"
                "QWidget > QPushButton:hover { font-size: 10pt; } ");
    frame.show();

[mrjj]

@ajaxcrypto

Hi
I cannot make it do anything strange. same windows and compiler.

[ajaxcrypto]

As you can see, the third button, the first and last 'x' is cutoff on hover. What is the solution?
Also, another problem, QLabel:hover randomly does not work for some labels....

[JonB]

@ajaxcrypto
Assuming your button is just wide enough to show the text at 9pt, what are you expecting to happen if you hover and it changes to 10pt? Are you expecting the button to resize to accommodate?

[ajaxcrypto]

I do not know what to expect, should the button auto resize to fit contents? But note that if I have a single button inside a layout, it does resize and the text is visible, the problem only happens with multiple buttons in a Layout.

[mrjj]

Hi
Button MUST be big enough for the Hover text size.
It will not ever resize to fit the text.

The buttons will use the width allowed by the layout.

Solution is to make the QFrame bigger. :)

[ajaxcrypto]

So how do I make sure that they are big enough? The texts displayed in the button are not necessarily static. Do I every time calculate width using QFontMetrics and set it to bigger one? Also then it is not as flexible anymore i.e. the font size on hover can be anything specified by the user through a stylesheet. So do I have to write my own CSS parser to figure it out?

[mrjj]

@ajaxcrypto
Well you can start with a size for window that can hold longer texts.

When using style sheet , there is no way to know what font settings are put in there. (sadly)

So if you really need to allow user total freedom then yes you must write some code
to check the texts with a given font to see if it will fit.

You might be able to subclass QPushButton and make it a bit more automatic that way but
im not sure how much it would help.

[ajaxcrypto]

So for an auto resize-able button, I have to write a QSS parser to figure out the font size on various selectors, then use this to change the button dimension based on that and the current text set for the button? (Because the user can specify this:

QPushButton { font-size: 10pt; }
QPushButton:hover { font-size: 11pt; }
QPushButton:pressed { font-weight: bold; }
// numerous other such combinations with properties/selectors...

That seems like an awful amount of work for something seemingly simple. Also, when should I parse the stylesheet if I override a QPushButton ?

1. When it is created with a text and parent, get parent style sheet and parse
2. When setStyleSheet is called
3. When setText is called
4. Probably at resize event as well ?
5. When setObjectName is called

Note: The stylesheet can be set anywhere, either the button itself, or any parent or application wide.

Edit: Also, I need to combine multiple such style blocks when they are set at multiple levels and match the QPushButton and figure out which has the highest specificity and then calculate the dimension based on that...

[mrjj]

@ajaxcrypto
Hi
I would not try to parse the stylesheet as that would just be so involved.

What i imagine is something like ( using the QStyleOption for push button)

 void CustomWidget::paintEvent(QPaintEvent *)
 {
     QStyleOption opt;
     opt.init(this); // any font set by style sheet should be reflected here
    // calculate text size using QFontMetrics
   // set minimumWidth based on that.
     QPainter p(this);
     style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this); // would use the  style()->drawButton or what ever is used for pushbuttons

I have not checked that QStyleOptionXXX does in fact reflect the font but since the above code
lets me use custom widgets with stylesheet so I assume it will be same for a QPushButton child.

[ajaxcrypto]

Here is the paint event implementation from QPushButton:

void QPushButton::paintEvent(QPaintEvent *)
{
    QStylePainter p(this);
    QStyleOptionButton option;
    initStyleOption(&option);
    p.drawControl(QStyle::CE_PushButton, option);
}

It already uses the QStyleOptionButton ...

[mrjj]

@ajaxcrypto
Yes ofc. ( i just showed the concept with QWidget and not the style used for button)
So if u subclass it and add some size checking, it might fly ?

[ajaxcrypto]

But how do I figure out the required max height/width? For that the logic is

1. Parse and resolve all stylesheet
2. Figure out the largest dimensions based on font-size and font-weight
3. Resize the button accordingly.

Step 2 would require like looping through all the selector/combinators applied to the button and figuring out the largest font size and weight

[mrjj]

@ajaxcrypto
QStyle respect stylesheets.
So i would not look at the stylesheet as text but when its been processed by Qt.
At the moment of painting.
That would be in the QStyleOptionButton.
So with a little luck, you can make button check the actual text size and
adjust if needed.

[ajaxcrypto]

This fiddle nicely demonstrates what I wanted to acheive with QPushButton

https://jsfiddle.net/h7fkj5ow/

[ajaxcrypto]

Tried fiddling with style option, does not work, in most cases, even the intial text gets clipped horizontally, on hover, clips even more... So basically an auto expanding button which fits to its content is simply not possible without writing a complete QSS parsing system?

Why doesn't Qt expose the parser API ? It would have saved me days worth of work... Like maybe changing a single property for :hover selector based on some condition for a QPushButton i.e.

button->setStyleProperty("hover", "background-color", Qt::white);

[mrjj]

@ajaxcrypto
Hi
I understand it. but none of the widgets will grow to fit text.

Sadly, it seems the QStyleOptionButton do not reflect the new
font size set by hover. It reports width as same so my idea was not as straight as i had hoped.
It should be in there some where.

[mrjj]

@ajaxcrypto
Hi
They consider the parser private.
I also dreamed of an API so colors etc could be read from stylesheet alone.

[ajaxcrypto]

So basically I have to roll my own QSS parser, keep track of all relevant styles and then paint widgets accordingly for auto-resizing widgets based on current properties... Sigh
Might as well write my own GUI library at this stage using primitives + signal/slots...

Note: I could not find any documentation as to where selector specific style information is stored, neither are there public/protected member functions to get them.