Label text obscured in QFrame in QMainWindow (QT5)

[charred_array]

@JonB
I'm using Qt Creator 7.0.2 with QT 5.15.2. I cannot change this since we are stuck with this version for this project.

[mpergand]

@charred_array

Works even with older QCreator.

[charred_array]

@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:

[Pl45m4]

@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 a QLineEdit input field or some QSpinBox)

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.

[JoeCFD]

@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]

@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 a QLineEdit input field or some QSpinBox)

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]

@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.

[Pl45m4]

@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.

[Christian Ehrlicher]

@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]

@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]

@charred_array

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.)

[charred_array]

@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>

[mpergand]

@charred_array
Add a layout to main window.

and a spacer if you want your hlayout to be on top.

[charred_array]

@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]

@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.

[charred_array]

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.

[JoeCFD]

@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]

@JoeCFD
All screens displayed are on the same display and all have the same resolution of 800x480