PDA

View Full Version : Layout issues, widgets get resized and unusable



ecce
20th April 2015, 19:40
When a add a couple of widgets to a formLayout in a QDialog everything looks fine. But when I add a couple of widgets to a formLayout (in a QFrame) in a tab, they get resized in a weird way. Screenshot attached. Not sure what to google on this one.... need help! :)

What I want is a large number of QLineEdit's, one below the other, and a scrollbar in the tab. What is a recommended approach on this? A QScrollArea instead of a QFrame?

11111

Lykurg
20th April 2015, 19:51
Hi,

it looks, indeed, as if the frame has not enough space for the line edits. If you resize the tab widget, are the lineedits then shown normal? If so, it's a space problem.


A QScrollArea instead of a QFrame?

Yes, that's the way to go.

Cheers.

wysota
20th April 2015, 20:07
The frame should push apart the encompassing dialog. If that doesn't happen then there is a layout missing somewhere. Possibly the frame itself is not in a layout.

ecce
20th April 2015, 21:12
If I make the tabs widget higher, the widgets does not get resized, but there are huge space between them. There seems to be a big "top and bottom margin" on them. This does not happen with the widgets in a QDialog.

The frame itself is not in a layout, its added to the Tab Widget, which is in an layout.

11112

Radek
20th April 2015, 21:42
The layout "centers" its items vertically so that they use the available space. The layout items do not get any margins. As to the first picture: the items seem to have too small vertical size. Check in Designer and make the vertical size bigger.

ecce
20th April 2015, 21:52
That does not seem to be exactly true, the widgets are at the top of the frame. There are a certain space between the widgets, and a lot of space after the last one (unless there are enough widgets to fill the vertical space). I don't have access to Qt Designer, I use the license free version.

Radek
21st April 2015, 06:54
So do I (using Linux). Please, post your .ui (the bad one).

wysota
21st April 2015, 07:28
The frame itself is not in a layout, its added to the Tab Widget, which is in an layout.
Each tab in the tab widget can have a layout of its own. The frame should be put in a layout of the tab.

ecce
21st April 2015, 10:59
Each tab in the tab widget can have a layout of its own. The frame should be put in a layout of the tab.

... but QTabWidget.addTab() requires a widget and will fail if I supply a layout...?

I've figured something out though, it seems to be the checkbox that messes things up a bit. If I remove it the space between the "rows" decreases.

wysota
21st April 2015, 14:39
... but QTabWidget.addTab() requires a widget and will fail if I supply a layout...?
Are you passing QFrame instance to addTab? Does it change anything if you use QWidget instead?

ecce
21st April 2015, 20:29
Are you passing QFrame instance to addTab? Does it change anything if you use QWidget instead?

Yes, I'm passing a QFrame to the addTab, and there does not seem to be any difference if I use a QWidget. I think I've worked around the space problem, not sure exactly why what I've done works better than before, but it does.

The scrollable area however remains a problem. I've set the maximum height for the QTabWidget to 250, and I would like the contents of the tabs to be scrollable if they require more space than that. I've tried about a million ways, most of them looks something like this (http://www.pixelstech.net/article/index.php?id=1330778916) (although I use python). So far I've never seen a scrollbar.

wysota
21st April 2015, 20:50
The important aspects of using the scroll area the way you want are:

1. set widgetResizable to true
2. make sure the widget has a layout or otherwise returns proper sizeHints.

ecce
21st April 2015, 20:55
The important aspects of using the scroll area the way you want are:

1. set widgetResizable to true
2. make sure the widget has a layout or otherwise returns proper sizeHints.

Thanks for the input, I've got a scrollbar, but it's not the finest GUI ever made to be honest: 11115

Here's the code:

from PySide.QtGui import *
from PySide.QtCore import *

class PolicyTabs(QTabWidget):

# Constructor
def __init__(self):
QTabWidget.__init__(self)
self.setMaximumHeight(250)

t = testWidget()

self.addTab(t, "Model and IOS")

class testWidget(QWidget):

def __init__(self, parent= None):
super(testWidget, self).__init__()

w = QWidget()
vbox = QVBoxLayout(self)

t1 = policyItem("Test1:")
t2 = policyItem("Test2:")
t3 = policyItem("Test3:")
t4 = policyItem("Test4:")
t5 = policyItem("Test5:")
t6 = policyItem("Test6:")
vbox.addLayout(t1)
vbox.addLayout(t2)
vbox.addLayout(t3)
vbox.addLayout(t4)
vbox.addLayout(t5)
vbox.addLayout(t6)

w.setLayout(vbox)

#Scroll Area Properties
scroll = QScrollArea()
scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwa ysOn)
scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAl waysOff)
scroll.setWidgetResizable(True)
scroll.setWidget(w)

#Scroll Area Layer add
vLayout = QVBoxLayout(self)
vLayout.addWidget(scroll)
self.setLayout(vLayout)



class policyItem(QHBoxLayout):

text = ''

def __init__(self, label):
QHBoxLayout.__init__(self)

self.c = QCheckBox()
self.l = QLabel(label)
self.t = QLineEdit()

self.t.textChanged.connect(self.saveText)

self.addWidget(self.c)
self.addWidget(self.l)
self.addWidget(self.t)


def getText(self):
return self.t.text()

def isChecked(self):
return self.c.isChecked()

def saveText(self):
self.text = self.t.text()
#print self.text

Why the big margins between the scrollable area an the boundaries of the tab?

wysota
21st April 2015, 21:28
Why not simply have a grid with two columns, first one with checkbox (giving you also the label) and the second with a line edit?

As for the boundaries, they come from margins of the scroll area and the empty (and definitely not needed) widget. Put the scroll area directly into the tab widget instead and the margin should go away.

ecce
22nd April 2015, 20:13
Why not simply have a grid with two columns, first one with checkbox (giving you also the label) and the second with a line edit?

As for the boundaries, they come from margins of the scroll area and the empty (and definitely not needed) widget. Put the scroll area directly into the tab widget instead and the margin should go away.

Sounds good. Can't get it to work though. Am I doing anything wrong by thinking like this?

1. Create a QGridLayout
2. Add widgets
3. Create a QScrollArea
4. Set scroll properties
5. You must set a widget in the ScrollArea. The GridLayout is not a widget, so...
6. Create an empty QWidget
7. Set the QWidget as the layout parent
8. Now you can set the widget with the QScrollArea function

The result is just what I had before, the widgets gets resized. Code:


from PySide.QtGui import *
from PySide.QtCore import *

class PolicyTabs(QTabWidget):

# Constructor
def __init__(self):
QTabWidget.__init__(self)
self.setMaximumHeight(250)

#t = testWidget()

w = QWidget()

layout = QGridLayout(w)
c1 = QCheckBox("Label")
t1 = QLineEdit()
c2 = QCheckBox("Label")
t2 = QLineEdit()
c3 = QCheckBox("Label")
t3 = QLineEdit()
c4 = QCheckBox("Label")
t4 = QLineEdit()
c5 = QCheckBox("Label")
t5 = QLineEdit()
c6 = QCheckBox("Label")
t6 = QLineEdit()
c7 = QCheckBox("Label")
t7 = QLineEdit()
layout.addWidget(c1, 0, 0)
layout.addWidget(t1, 0, 1)
layout.addWidget(c2, 1, 0)
layout.addWidget(t2, 1, 1)
layout.addWidget(c3, 2, 0)
layout.addWidget(t3, 2, 1)
layout.addWidget(c4, 3, 0)
layout.addWidget(t4, 3, 1)
layout.addWidget(c5, 4, 0)
layout.addWidget(t5, 4, 1)
layout.addWidget(c6, 5, 0)
layout.addWidget(t6, 5, 1)
layout.addWidget(c7, 6, 0)
layout.addWidget(t7, 6, 1)

scroll = QScrollArea()
scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwa ysOn)
scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAl waysOff)
scroll.setWidgetResizable(True)
scroll.setWidget(w)

self.addTab(w, "Model and IOS")

wysota
22nd April 2015, 21:17
I meant something like the attached form.

d_stranz
27th April 2015, 19:55
I meant something like the attached form.

If you insert a vertical spacer under the last checkbox, I think it makes the behaviour more pleasing - the spacing between the rows stays constant, no matter what size the form is. That's my personal preference, of course, but I find that the alternative - having the child widgets spread out when the form is enlarged - not so visually pleasing, especially in a tab widget context. Depending on how many child widgets are in each tab, the spacings can vary widely as you go from tab to tab. If you use spacers, then each tab will have some layout consistency with the others in the group.

ecce
8th May 2015, 14:33
I meant something like the attached form.

Got it working! Thanks a bunch! (Sorry for the delayed answer, girlfriend just gave birth to twin boys, been away for a while...) :)

wysota
8th May 2015, 14:38
(Sorry for the delayed answer, girlfriend just gave birth to twin boys, been away for a while...) :)

Congratulations :)