Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align to the right text from QLabel and QLineEdit

Tags:

c++

qt

qlayout

I have a QLabel just below a QLineEdit with the same size and alignment properties:

QLineEdit *lineEdit = new QLineEdit("999");
lineEdit->setFixedWidth(100);
lineEdit->setAlignment(Qt::AlignRight);
//
QLabel *label = new QLabel("999");
label->setFixedWidth(100);
label->setAlignment(Qt::AlignRight);
//
QLayout *layout = new QVBoxLayout;
layout->addWidget(lineEdit);
layout->addWidget(label);

Here is how this is rendered:

enter image description here

How can I have the text of the bottom label exactly right-aligned to the text of the lineEdit?

Full award if you find a solution that works on all platforms, and that also works when the font sizes are different in the lineEdit and label.

like image 576
mimo Avatar asked Apr 25 '16 06:04

mimo


2 Answers

Unfortunately it may not be possible, at least not out of the box, the right margin will not work, as it is always 0 even when the text is obviously offset to the left. The reason for this is this offset is not determined by the margins, but depends on the combination of platform GUI style and particular font's metrics that's being used, and its value is "conveniently" not available in the class public interface, there is no way to get to it.

You can get the font metrics easily, but you can't get the QStyleOptionFrame as the method required is protected, accessing it will require to subclass QLineEdit. However, if you are lucky, that value is very likely to be zero, so you could go with something as simple as this:

  QVBoxLayout *layout = new QVBoxLayout;
  QLineEdit *lineEdit = new QLineEdit("999");
  lineEdit->setAlignment(Qt::AlignRight);
  QLabel *label = new QLabel("999");
  label->setAlignment(Qt::AlignRight);

  int offsetValue = lineEdit->fontMetrics().averageCharWidth();
  label->setIndent(offsetValue);

  setLayout(layout);
  layout->addWidget(lineEdit);
  layout->addWidget(label);

If that doesn't work correctly for you, you will have no other choice but to subclass QLineEdit, carefully examine its paint event, determine where the offset is being calculated, and store that value in a public member so it can be accessed from the outside to be used to offset the label.

I personally got lucky with that code:

enter image description here

like image 76
dtech Avatar answered Sep 20 '22 02:09

dtech


Would you be able to instead of using a QLineEdit and a QLabel to use two QLineEdits?

Consider the following:

QWidget* widget = new QWidget();
// Original line edit
QLineEdit *lineEdit1 = new QLineEdit("999");
lineEdit1->setFixedWidth(100);
lineEdit1->setAlignment(Qt::AlignRight);
lineEdit1->setStyleSheet("border-width: 2px;");
// A suggestion if you want a label
QLabel *label = new QLabel("999");
label->setFixedWidth(100);
label->setAlignment(Qt::AlignRight);
label->setStyleSheet("border: 2px solid rgba(255, 0, 0, 0%)");
// Alternatively if you can use another QLineEdit
QLineEdit *lineEdit2 = new QLineEdit("999");
lineEdit2->setFixedWidth(100);
lineEdit2->setAlignment(Qt::AlignRight);
lineEdit2->setReadOnly(true);
lineEdit2->setStyleSheet("background: rgba(0, 0, 0, 0%);  "
                         "border-width: 2px;              "
                         "border-style: solid;            "
                         "border-color: rgba(0, 0, 0, 0%);");
// Bring it all together
QLayout *layout = new QVBoxLayout(widget);
layout->addWidget(lineEdit1);
layout->addWidget(label);
layout->addWidget(lineEdit2);
widget->show();

It forces all borders to be 2px, so on different platforms it should be the same. The second QLineEdit should not look different than the QLabel (The text color looks slightly darker than that of the label though, which might be a good thing since it matches the original edit)

The added benefit of using a QLineEdit instead of the QLabel is that the value is now selectable...

Disclaimer: I have only tested on Linux and I have not done a pixel level comparison.

Edit: I see the alignment fails with different font sizes.

like image 30
CJCombrink Avatar answered Sep 19 '22 02:09

CJCombrink