QLineEdit and QPushButton heights

[ecir.hana]

Hello,

I created simple QHboxLayout in Qt Creator's Design which contains QLineEdit and QPushButton as follows:

hierarchy.png

and which looks like:

align.png

Please, can someone tell me why has the button larger bounding box height than the button? Both of the widgets have the same visible height but the button keeps growing the parent layout.

In other words, where is the button's padding coming from and how to make it to have no padding?

[ChrisW67]

The height of the horizontal layout is the height given to it by the widget/layout it is in after considering size constraints that may apply (derived from its contents). In this example that is not related to the height of either the line edit or the button. The central widget does not have a layout to control the size at the moment anyway.

If you want the line edit/button widget to occupy the top of a larger space the layout offers them then set that. In Designer you access layout alignment from the right-click context menu of the widget.

[ecir.hana]

Thank you very much for the reply!

Perhaps I explained myself a bit not clearly - please, have a look at the following screenshots:

button-edit.png

edit.png

bboxes.png

hierarchy2.png

At the top and bottom there are to white QWidgets to make it more easy to see. If both of the widgets are in-between, none of the widgets touches the white ones. If I remove the button, the remaining edit starts to touch the whites. So I assume the button has same kind of larger bbox which makes the center section grow.

If I leave both the button and the edit line in the middle, how to make them to touch the white widgets?

---

Added after 19 minutes:

It seems this is a bug on Mac, on Ubuntu Qt 4.8 in works perfectly:

linux-qt.png

Can anyone please confirm this?

[BalaQT]

Hi,

Just try with setMargin and setSpacing.

ex:

HLayout->setMargin(0);
HLayout->setSpacing(0);
 
VLayout->setMargin(0);
VLayout->setSpacing(0);

HLayout->setMargin(0);
HLayout->setSpacing(0);

VLayout->setMargin(0);
VLayout->setSpacing(0);

To copy to clipboard, switch view to plain text mode 

This will work fine.

Hope it helps.
Bala

[ecir.hana]

Thanks for the reply but unfortunately it does not work:

margin-spacing.png

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    ui->horizontalLayout_5->setMargin(0);
    ui->horizontalLayout_5->setSpacing(0);
 
    ui->verticalLayout->setMargin(0);
    ui->verticalLayout->setSpacing(0);
 
}

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->horizontalLayout_5->setMargin(0);
    ui->horizontalLayout_5->setSpacing(0);

    ui->verticalLayout->setMargin(0);
    ui->verticalLayout->setSpacing(0);

}

To copy to clipboard, switch view to plain text mode 

[d_stranz]

I'm not clear on what you objecting to. Is it that the button has some background area around it that is not white? I am guessing that this is due to the fact that when the button is shown as selected or is the default button, this border area is used to display the highlight rect. So as far as I know, you can't get rid of this (i.e. force the non-selected button to occupy a rectangle the same height as the line edit).

Try playing with the palette instead. The QPalette::Button and QPalette::ButtonText control the face of the button itself; QPalette::Window probably controls the color of the area outside the button proper. Try changing that entry to white, see if it gets you what you want.

The differences you see on different OS are probably due to the windowing system and styles used there. Perhaps these other systems have other ways to indicate selection or default status, so the button does not need to reserve space around itself for the highlights.

[ecir.hana]

Is it that the button has some background area around it that is not white?

Not exactly - it is not a problem that the area around the button is not white - probably it would be possible to paint it with different color. The problem is, that it "pushes" other widgets away from it. If I remove the button, everything looks ok, even on Mac:

lineedit-only.png

I'm attaching the .ui file as well, should have done that earlier:

mainwindow.ui

Also, I don't think the button is selected or default..?

[d_stranz]

I still don't understand the problem. This is normal behavior for a button in a layout. It does not matter if the button is selected or the default button - the button's total size still has to reserve space for the highlight rectangle even when it is not highlighted. Think about it - if the button did not reserve this space, every time the button was selected or became the default button, the layout would have to "grow" to accommodate the highlighted size, and thus everything around it would have to be shifted a bit.

I guess if you don't like this behavior, you can derive a button from QPushButton and override the sizeHint() method to return a size that is smaller (by the size of the highlight border thickness, whatever that is). This would mean that when the button was highlighted, the highlight rect might end up being drawn the wrong size, so you might have to change the paintEvent also to make the drawing rect bigger again.

[ecir.hana]

I understand but where can I see that highlight rectangle? On Mac, it is still much smaller than the reserved spacing:

default-button.png

selected-button.png

And it does not have to reserve the spacing anyway as it could draw over the surrounding area - like the QLineEdit does.

I will try to subclass QPushButton, thanks for the tip. By the way - is it possible to change sizeHint without subclassing?

[d_stranz]

is it possible to change sizeHint without subclassing?

No. But if that is the only change required, then that is the only method you need to define for your subclass (other than the constructor / destructor).

I don't think I can give you much more help. In your screen shots, I cannot see why you think that the highlight rectangles for the button and line edit are different. It looks to me as though the highlighted line edit is exactly the same height as the highlighted button. You are obviously seeing something that I am not.

[ecir.hana]

Thank you, you already helped me a lot!

I cannot see why you think that the highlight rectangles for the button and line edit are different

They are not and that's exactly my point. The highlight rectangle looks the same for button and for line edit. But they behave differently and this is the problem I'm describing. Their highlight rectangles seem to have the same height yet they push the top and bottom widgets appart differently.

button2.png

edit2.png

In other words, from these two pictures above it is apparent that the button gets more spacing around itself than the line edit. Why is it so if we both see that their highlight rectangles are the same?

Edit: the same configurations with focus:

button2highlight.png

edit2highlight.png

[ChrisW67]

They are of different heights because they are coded to be of different heights. They draw with different internal spaces because they are coded to draw with different internal spaces. The shorter widget also gains some whitespace because the horizontal layout height is driven by the taller widget.

If you really want pixel level sizing control then you are free to absolutely position and/or size widgets, reimplement their sizeHint() or paintEvent(), or otherwise style them. Ultimately you are obsessing about pixel-level rendering that, no matter what you do, will vary from platform to platform, Windows version to version, theme to theme anyway.