CODEWITHSUNDEEP
pythonpyqt5
AlgoRythm
AlgoRythm

Reputation: 1389

QVBoxLayout text being clipped vertically as parent is resized

I have a QVBoxLayout that seems to be squishing it's content when the container is resized horizontally. This is what it looks like when the window is at it's minimum width. Everything fits perfectly:

enter image description here

Here is what happens after the window has been resized horizontally:

enter image description here

As you can see (Viewing the highlighted post, which has a darker background color), the container shrinks, and the text is cut off. Here is my code:

class MainWindow(QWidget):

    def __init__(self):
        super().__init__()
        self.setObjectName("window")
        self.resize(850, 650)
        self.setWindowTitle("qt-devRant by AlgoRythm")

        header = QWidget(self)
        header.setObjectName("header")
        header.move(0, 0)
        self.header = header

        logo = QLabel(header)
        logo.move(10, 8)
        logo.setPixmap(logo_small.scaledToHeight(45, Qt.SmoothTransformation))

        name = QLabel(header)
        name.setObjectName("header-name")
        name.setText("devRant")
        name.setFont(comfortaa)
        name.move(60, 0)

        rant_scroller = QScrollArea(self)
        rant_scroller.setWidgetResizable(True)
        rant_scroller.setObjectName("rant-scroller")
        rant_scroller.setFrameShape(QFrame.NoFrame)
        self.rant_scroller = rant_scroller

        rant_area = QWidget()
        rant_area.setObjectName("rant-area")
        rant_scroller.setWidget(rant_area)
        self.rant_area = rant_area

        rant_scroller_layout = QVBoxLayout()
        rant_area.setLayout(rant_scroller_layout)
        rant_scroller_layout.setContentsMargins(0, 0, 0, 0)
        rant_scroller_layout.setSpacing(0)
        self.rant_scroller_layout = rant_scroller_layout

        rants = Rant.get(limit=50)

        for rant in rants:
            test = RantContainer()
            test.rant_content.setText(rant.text)
            rant_scroller_layout.addWidget(test.container, 0, Qt.AlignCenter | Qt.AlignTop)

    def resizeEvent(self, event):
        self.do_sizing()

    def do_sizing(self):
        self.size_header()
        self.size_rant_scroller()

    def size_header(self):
        self.header.resize(self.width(), self.header.height())

    def size_rant_scroller(self):
        self.rant_scroller.move(0, self.header.height())
        self.rant_scroller.resize(self.width(), self.height() - self.header.height())

and in another file,

class RantContainer:

    def __init__(self):
        # Bad idea to subclass widget because it breaks painting
        # i.e. the background color goes bye bye
        # I'd love to. I really would. But just no.
        container = QWidget()
        container.setObjectName("rant-container")
        self.container = container

        layout = QVBoxLayout()
        container.setLayout(layout)
        layout.setSpacing(0)
        layout.setContentsMargins(60, 10, 10, 10)

        rant_content = QLabel()
        rant_content.setObjectName("rant-content")
        rant_content.setWordWrap(True)
        rant_content.setFont(rant_font)
        layout.addWidget(rant_content, 0, Qt.AlignLeft | Qt.AlignTop)
        self.rant_content = rant_content

        upvote_btn = QPushButton(container)
        upvote_btn.setObjectName("upvote-btn")
        upvote_btn.move(10, 10)
        upvote_btn.setFont(vote_button_font)
        upvote_btn.setText("++")
        self.upvote_btn = upvote_btn

        downvote_btn = QPushButton(container)
        downvote_btn.setObjectName("upvote-btn")
        downvote_btn.move(10, 80)
        downvote_btn.setFont(vote_button_font)
        downvote_btn.setText("--")
        self.downvote_btn = downvote_btn

        score_label = QLabel(container)
        score_label.setObjectName("rant-score")
        score_label.setText("69")
        score_label.setFont(score_font)
        score_label.move(12, 55)
        self.score_label = score_label

The QSS concerning these items:

QWidget#rant-container{
    background-color: white;
    min-height: 180px;
    min-width: 660px;
    max-width: 660px;
}
QWidget#rant-container:hover{
    background-color: #f2f2f2;
}

Upvotes: 2

Views: 472

Answers (1)

eyllanesc
eyllanesc

Reputation: 243975

The problem is caused by not using the layouts in RantContainer, It is also advisable to set the restrictions in the rant-content instead of rant-container.

class RantContainer:
    def __init__(self):
        # Bad idea to subclass widget because it breaks painting
        # i.e. the background color goes bye bye
        # I'd love to. I really would. But just no.
        container = QtWidgets.QWidget()
        container.setObjectName("rant-container")
        self.container = container

        rant_content = QtWidgets.QLabel()
        rant_content.setObjectName("rant-content")
        rant_content.setWordWrap(True)
        # rant_content.setFont(rant_font)
        self.rant_content = rant_content
        rant_content.setFixedWidth(600) # <---
        rant_content.setMinimumHeight(150) # <---

        upvote_btn = QtWidgets.QPushButton()
        upvote_btn.setObjectName("upvote-btn")
        # upvote_btn.setFont(vote_button_font)
        upvote_btn.setText("++")
        self.upvote_btn = upvote_btn

        downvote_btn = QtWidgets.QPushButton()
        downvote_btn.setObjectName("upvote-btn")
        # downvote_btn.setFont(vote_button_font)
        downvote_btn.setText("--")
        self.downvote_btn = downvote_btn

        score_label = QtWidgets.QLabel(alignment=QtCore.Qt.AlignCenter)
        score_label.setObjectName("rant-score")
        score_label.setText("69")
        # score_label.setFont(score_font)
        self.score_label = score_label

        vlay = QtWidgets.QVBoxLayout()
        vlay.addWidget(upvote_btn)
        vlay.addWidget(score_label)
        vlay.addWidget(downvote_btn)
        vlay.addStretch()

        hlay = QtWidgets.QHBoxLayout(container)
        hlay.addLayout(vlay)
        hlay.addWidget(rant_content)

QSS:

QWidget#rant-container{
    background-color: white;
}
QWidget#rant-container:hover{
    background-color: #f2f2f2;
}

Or:

class RantContainer:
    def __init__(self):
        # Bad idea to subclass widget because it breaks painting
        # i.e. the background color goes bye bye
        # I'd love to. I really would. But just no.
        container = QtWidgets.QWidget()
        container.setObjectName("rant-container")
        self.container = container

        rant_content = QtWidgets.QLabel()
        rant_content.setObjectName("rant-content")
        rant_content.setWordWrap(True)
        # rant_content.setFont(rant_font)
        self.rant_content = rant_content

        upvote_btn = QtWidgets.QPushButton()
        upvote_btn.setObjectName("upvote-btn")
        # upvote_btn.setFont(vote_button_font)
        upvote_btn.setText("++")
        self.upvote_btn = upvote_btn

        downvote_btn = QtWidgets.QPushButton()
        downvote_btn.setObjectName("upvote-btn")
        # downvote_btn.setFont(vote_button_font)
        downvote_btn.setText("--")
        self.downvote_btn = downvote_btn

        score_label = QtWidgets.QLabel(alignment=QtCore.Qt.AlignCenter)
        score_label.setObjectName("rant-score")
        score_label.setText("69")
        # score_label.setFont(score_font)
        self.score_label = score_label

        vlay = QtWidgets.QVBoxLayout()
        vlay.addWidget(upvote_btn)
        vlay.addWidget(score_label)
        vlay.addWidget(downvote_btn)
        vlay.addStretch()

        hlay = QtWidgets.QHBoxLayout(container)
        hlay.addLayout(vlay)
        hlay.addWidget(rant_content)

qss:

QWidget#rant-container{
    background-color: white;
}
QWidget#rant-container:hover{
    background-color: #f2f2f2;
}

QWidget#rant-content{
    min-height: 180px;
    min-width: 660px;
    max-width: 660px;
}

Upvotes: 1

Related Questions