Label text obscured in QFrame in QMainWindow (QT5)
-
Works even with older QCreator.
@mpergand
Thanks. I do have those options.
I tried applying the "Form Layout", but it didn't have the desired effect. Not much changed other than a weird grey square behind the screen during booting and z order of widgets screwed up. Still an obscured g.
Also the screens that do work don't have a layout either: -
@mpergand
Thanks. I do have those options.
I tried applying the "Form Layout", but it didn't have the desired effect. Not much changed other than a weird grey square behind the screen during booting and z order of widgets screwed up. Still an obscured g.
Also the screens that do work don't have a layout either:@charred_array said in Label text obscured in QFrame in QMainWindow (QT5):
I tried applying the "Form Layout"
Form layout is not be the best option to pick here. Go for horizontal- or verticalLayout.
Form layout works best for simple inputs where you usually have a pair of widgets in each row (e.g.QLabel
description + some widget like aQLineEdit
input field or someQSpinBox
)Also the screens that do work don't have a layout either
There you only have one widget. (Might or might not be the point)
Layouts really start to work once you have multiple widgets in one container. -
I have a label inside a QFrame. This QFrame is inside a qwidget and this widget is inside of a QMainWindow. The text in this label is obscured: the g is only partially visible. This is strange since the frame is large enough for the text.
In all of the screens it works fine except in the main window. It also looks good in the preview.
The settings for these widgets are identical. I even copied a QFrame with its label from a different screen and it is also obscured. The only difference is that it's inside the main window. I checked all the settings in the ui files and in the qss file and I couldn't find anything.
I tried to set the margins to 0 in software:this->setContentsMargins(0,0,0,0); ui->centralWidget->setContentsMargins(0,0,0,0); ui->frame_6->setContentsMargins(0,0,0,0); ui->ScreenName_2->setContentsMargins(0,0,0,0);
But this didn't change anything.
Good label on a second screen.ui:
Obscured label on main screen:
Settings:
Why are my g's obscured and how do I fix this?
@charred_array Your font size is too big or your label height is too small. Maybe try to set its sizePolicy to [Preferred, Expanding.0,0]
-
@charred_array said in Label text obscured in QFrame in QMainWindow (QT5):
I tried applying the "Form Layout"
Form layout is not be the best option to pick here. Go for horizontal- or verticalLayout.
Form layout works best for simple inputs where you usually have a pair of widgets in each row (e.g.QLabel
description + some widget like aQLineEdit
input field or someQSpinBox
)Also the screens that do work don't have a layout either
There you only have one widget. (Might or might not be the point)
Layouts really start to work once you have multiple widgets in one container.@Pl45m4 said in Label text obscured in QFrame in QMainWindow (QT5):
There you only have one widget. (Might or might not be the point)
Layouts really start to work once you have multiple widgets in one container.I only showed 1 widget, but the screens all have over a hundred of widgets, labels popups etc.
@Pl45m4 said in Label text obscured in QFrame in QMainWindow (QT5):
Form layout is not be the best option to pick here. Go for horizontal- or verticalLayout.
Form layout works best for simple inputs where you usually have a pair of widgets in each row (e.g.QLabel
description + some widget like aQLineEdit
input field or someQSpinBox
)Changing this to vertical or horizontal will screw up the current layout that took hundreds of hours to tweak. There is nothing wrong with the positioning in this screen. Only the text field that is not rendering properly for an unknown reason.
-
@charred_array Your font size is too big or your label height is too small. Maybe try to set its sizePolicy to [Preferred, Expanding.0,0]
@JoeCFD said in Label text obscured in QFrame in QMainWindow (QT5):
@charred_array Your font size is too big or your label height is too small. Maybe try to set its sizePolicy to [Preferred, Expanding.0,0]
Tweaking the size did work. But it screwed up the alignment. Now the screen label on the main screen is lower than that of other screens. I cannot edit geometry as it's greyed out. It's at least 7 pixels below the frame. It's a little better, but it still doesn't answer my question why the same label is rendered differently on a different screen.
-
@JoeCFD said in Label text obscured in QFrame in QMainWindow (QT5):
@charred_array Your font size is too big or your label height is too small. Maybe try to set its sizePolicy to [Preferred, Expanding.0,0]
Tweaking the size did work. But it screwed up the alignment. Now the screen label on the main screen is lower than that of other screens. I cannot edit geometry as it's greyed out. It's at least 7 pixels below the frame. It's a little better, but it still doesn't answer my question why the same label is rendered differently on a different screen.
@charred_array said in Label text obscured in QFrame in QMainWindow (QT5):
Tweaking the size did work. But it screwed up the alignment. Now the screen label on the main screen is lower than that of other screens.
There is a solution for this: layouts *cough*
I would assume that a layout would take care of the (or at least some) issues and resize (i.e. expand) the label and the rest according to its content size.
But I clearly do not know what else do you have in there, how "the rest" of your app / GUI look like and what impact mentioned changes would have. -
@charred_array said in Label text obscured in QFrame in QMainWindow (QT5):
Tweaking the size did work. But it screwed up the alignment. Now the screen label on the main screen is lower than that of other screens.
There is a solution for this: layouts *cough*
I would assume that a layout would take care of the (or at least some) issues and resize (i.e. expand) the label and the rest according to its content size.
But I clearly do not know what else do you have in there, how "the rest" of your app / GUI look like and what impact mentioned changes would have.@Pl45m4 said in Label text obscured in QFrame in QMainWindow (QT5):
There is a solution for this: layouts cough
And that's the only valid solution tbh - everything else will break sooner or later.
-
@charred_array said in Label text obscured in QFrame in QMainWindow (QT5):
Tweaking the size did work. But it screwed up the alignment. Now the screen label on the main screen is lower than that of other screens.
There is a solution for this: layouts *cough*
I would assume that a layout would take care of the (or at least some) issues and resize (i.e. expand) the label and the rest according to its content size.
But I clearly do not know what else do you have in there, how "the rest" of your app / GUI look like and what impact mentioned changes would have.@Pl45m4 said in Label text obscured in QFrame in QMainWindow (QT5):
There is a solution for this: layouts *cough*
Unfortunately it doesn't work. I used vertical layout and the g's are still covered up or misaligned. Plus there is an extra margin around the edge. Why isn't QT simply WYSIWYG?
I also tried grid layout, but there is an extra margin around the edge.
I tried to get rid of the margin but nothing helped:margin: 0px; spacing: 0px; padding: 0px; border: 0px;
-
@Pl45m4 said in Label text obscured in QFrame in QMainWindow (QT5):
There is a solution for this: layouts *cough*
Unfortunately it doesn't work. I used vertical layout and the g's are still covered up or misaligned. Plus there is an extra margin around the edge. Why isn't QT simply WYSIWYG?
I also tried grid layout, but there is an extra margin around the edge.
I tried to get rid of the margin but nothing helped:margin: 0px; spacing: 0px; padding: 0px; border: 0px;
Can you post a small example GUI to reproduce your situation (widget, font size, text...)
I doubt that you cant fix this issue using layouts and maybe some additional tuning (padding, margin etc.) -
Can you post a small example GUI to reproduce your situation (widget, font size, text...)
I doubt that you cant fix this issue using layouts and maybe some additional tuning (padding, margin etc.)@Pl45m4
I stripped the screen in question (I was able to compile it after deleting code reffering to elements on the screen, but I cannot run it. I deleted too many things).
Here is the ui file:<?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>ExampleScreen</class> <widget class="QMainWindow" name="ExampleScreen"> <property name="enabled"> <bool>true</bool> </property> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>800</width> <height>480</height> </rect> </property> <property name="font"> <font> <family>Segoe UI</family> </font> </property> <property name="windowTitle"> <string notr="true">Project name</string> </property> <property name="styleSheet"> <string notr="true">background-color: rgb(89, 89, 89); font-family: Segoe UI;</string> </property> <widget class="QWidget" name="centralWidget"> <widget class="QFrame" name="frame_5"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>640</width> <height>48</height> </rect> </property> <property name="minimumSize"> <size> <width>640</width> <height>48</height> </size> </property> <property name="styleSheet"> <string notr="true">background-color: #4d4d4d;</string> </property> <property name="frameShape"> <enum>QFrame::NoFrame</enum> </property> <property name="frameShadow"> <enum>QFrame::Raised</enum> </property> <layout class="QHBoxLayout" name="horizontalLayout_5"> <item> <spacer name="horizontalSpacer_10"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> <property name="sizeType"> <enum>QSizePolicy::Fixed</enum> </property> <property name="sizeHint" stdset="0"> <size> <width>10</width> <height>20</height> </size> </property> </spacer> </item> <item> <widget class="QLabel" name="ScreenName"> <property name="font"> <font> <family>Segoe UI</family> <pointsize>-1</pointsize> </font> </property> <property name="styleSheet"> <string notr="true">background-color: #4d4d4d; color : white; font-size: 23px;</string> </property> <property name="text"> <string>ggggggggggggg</string> </property> <property name="alignment"> <set>Qt::AlignCenter</set> </property> <property name="margin"> <number>0</number> </property> <property name="indent"> <number>48</number> </property> </widget> </item> <item> <spacer name="horizontalSpacer_11"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> <property name="sizeHint" stdset="0"> <size> <width>40</width> <height>20</height> </size> </property> </spacer> </item> <item> <widget class="QLabel" name="networkActiveIcon"> <property name="minimumSize"> <size> <width>35</width> <height>30</height> </size> </property> <property name="maximumSize"> <size> <width>35</width> <height>30</height> </size> </property> <property name="styleSheet"> <string notr="true">color :#a7a7a9; font-size: 20px; background-color: #4d4d4d;</string> </property> <property name="text"> <string notr="true"/> </property> <property name="pixmap"> <pixmap resource="my-project/recource.qrc">:/images/images/network/Icon_Network_Busy.png</pixmap> </property> <property name="scaledContents"> <bool>true</bool> </property> <property name="alignment"> <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set> </property> </widget> </item> <item> <widget class="QLabel" name="systemDateTime"> <property name="styleSheet"> <string notr="true">color :#a7a7a9; font-size: 20px; background-color: #4d4d4d;</string> </property> <property name="text"> <string notr="true">05 Jan 2017 16:25</string> </property> <property name="alignment"> <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set> </property> </widget> </item> </layout> </widget> </widget> </widget> <layoutdefault spacing="6" margin="11"/> <resources> <include location="my-project/recource.qrc"/> </resources> <connections/> <slots> </slots> </ui>
-
@Pl45m4
I stripped the screen in question (I was able to compile it after deleting code reffering to elements on the screen, but I cannot run it. I deleted too many things).
Here is the ui file:<?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>ExampleScreen</class> <widget class="QMainWindow" name="ExampleScreen"> <property name="enabled"> <bool>true</bool> </property> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>800</width> <height>480</height> </rect> </property> <property name="font"> <font> <family>Segoe UI</family> </font> </property> <property name="windowTitle"> <string notr="true">Project name</string> </property> <property name="styleSheet"> <string notr="true">background-color: rgb(89, 89, 89); font-family: Segoe UI;</string> </property> <widget class="QWidget" name="centralWidget"> <widget class="QFrame" name="frame_5"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>640</width> <height>48</height> </rect> </property> <property name="minimumSize"> <size> <width>640</width> <height>48</height> </size> </property> <property name="styleSheet"> <string notr="true">background-color: #4d4d4d;</string> </property> <property name="frameShape"> <enum>QFrame::NoFrame</enum> </property> <property name="frameShadow"> <enum>QFrame::Raised</enum> </property> <layout class="QHBoxLayout" name="horizontalLayout_5"> <item> <spacer name="horizontalSpacer_10"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> <property name="sizeType"> <enum>QSizePolicy::Fixed</enum> </property> <property name="sizeHint" stdset="0"> <size> <width>10</width> <height>20</height> </size> </property> </spacer> </item> <item> <widget class="QLabel" name="ScreenName"> <property name="font"> <font> <family>Segoe UI</family> <pointsize>-1</pointsize> </font> </property> <property name="styleSheet"> <string notr="true">background-color: #4d4d4d; color : white; font-size: 23px;</string> </property> <property name="text"> <string>ggggggggggggg</string> </property> <property name="alignment"> <set>Qt::AlignCenter</set> </property> <property name="margin"> <number>0</number> </property> <property name="indent"> <number>48</number> </property> </widget> </item> <item> <spacer name="horizontalSpacer_11"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> <property name="sizeHint" stdset="0"> <size> <width>40</width> <height>20</height> </size> </property> </spacer> </item> <item> <widget class="QLabel" name="networkActiveIcon"> <property name="minimumSize"> <size> <width>35</width> <height>30</height> </size> </property> <property name="maximumSize"> <size> <width>35</width> <height>30</height> </size> </property> <property name="styleSheet"> <string notr="true">color :#a7a7a9; font-size: 20px; background-color: #4d4d4d;</string> </property> <property name="text"> <string notr="true"/> </property> <property name="pixmap"> <pixmap resource="my-project/recource.qrc">:/images/images/network/Icon_Network_Busy.png</pixmap> </property> <property name="scaledContents"> <bool>true</bool> </property> <property name="alignment"> <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set> </property> </widget> </item> <item> <widget class="QLabel" name="systemDateTime"> <property name="styleSheet"> <string notr="true">color :#a7a7a9; font-size: 20px; background-color: #4d4d4d;</string> </property> <property name="text"> <string notr="true">05 Jan 2017 16:25</string> </property> <property name="alignment"> <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set> </property> </widget> </item> </layout> </widget> </widget> </widget> <layoutdefault spacing="6" margin="11"/> <resources> <include location="my-project/recource.qrc"/> </resources> <connections/> <slots> </slots> </ui>
@charred_array
Add a layout to main window.
and a spacer if you want your hlayout to be on top. -
@charred_array
Add a layout to main window.
and a spacer if you want your hlayout to be on top.@mpergand said in Label text obscured in QFrame in QMainWindow (QT5):
@charred_array
Add a layout to main window.
and a spacer if you want your hlayout to be on top.How do I get frame_5 at the very top? I still see spacing in your example.
-
@mpergand said in Label text obscured in QFrame in QMainWindow (QT5):
@charred_array
Add a layout to main window.
and a spacer if you want your hlayout to be on top.How do I get frame_5 at the very top? I still see spacing in your example.
@charred_array said in Label text obscured in QFrame in QMainWindow (QT5):
How do I get frame_5 at the very top? I still see spacing in your example.
Set the top margin to 0 :
and to the central widget as well if you like. -
@mpergand said in Label text obscured in QFrame in QMainWindow (QT5):
@charred_array
Add a layout to main window.
and a spacer if you want your hlayout to be on top.How do I get frame_5 at the very top? I still see spacing in your example.
I found the solution. For the frame I set the layoutTopMargin and the layoutBottomMargin to 0. This fixed both the alignment and the obscured text. What's strange is that these settings are identical in other screens (I even copied frames from other screens). As if there is a setting somewhere that adds some value to the configured value to make the applied value it larger. If someone can explain this strange behavior to me that would be great.
-
I found the solution. For the frame I set the layoutTopMargin and the layoutBottomMargin to 0. This fixed both the alignment and the obscured text. What's strange is that these settings are identical in other screens (I even copied frames from other screens). As if there is a setting somewhere that adds some value to the configured value to make the applied value it larger. If someone can explain this strange behavior to me that would be great.
@charred_array Qt may not be able to scale your widgets to display texts properly on all screens with different resolutions. In this scenario, you may check the available height of the label and dynamically adjust font size to display the text properly. The margins have default values and they may need to be adjusted for different sizes of screen as well. It is not an easy task to make your GUI to fit all screens.
-
@charred_array Qt may not be able to scale your widgets to display texts properly on all screens with different resolutions. In this scenario, you may check the available height of the label and dynamically adjust font size to display the text properly. The margins have default values and they may need to be adjusted for different sizes of screen as well. It is not an easy task to make your GUI to fit all screens.
@JoeCFD
All screens displayed are on the same display and all have the same resolution of 800x480