Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QSS - change ONLY top and bottom borders of a QFrame
QtWS25 Last Chance

QSS - change ONLY top and bottom borders of a QFrame

Scheduled Pinned Locked Moved Solved General and Desktop
7 Posts 2 Posters 10.8k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    PhantomR
    wrote on 5 May 2017, 23:16 last edited by PhantomR 5 May 2017, 23:18
    #1

    Hey,

    I'm not experienced with CSS/QSS, but how could I set ONLY the top and bottom borders of a QFrame to be, for example, black and have a width of 2px, while the left and right borders would remain unaffected? Also, how do I do this WITHOUT affecting other widgets belonging to the QFrame? I'm curious to see methods through both code and QT Designer -> change styleSheet.

    Thank you!!

    1 Reply Last reply
    0
    • C Online
      C Online
      Chris Kawa
      Lifetime Qt Champion
      wrote on 5 May 2017, 23:30 last edited by Chris Kawa 5 May 2017, 23:30
      #2

      Basically you can't. Using any style turns native (or the style's built-in) styling off. This means either you style the whole frame or none of it. You can't do both.
      Setting the style in designer or from code is exactly the same. If you set it from the designer, uic (the ui compiler) will generate a call to setStyleSheet() exactly as you would from code.
      As to how to limit the scope of the style - the easiest is to give the frame a name, and then just refer to that name in the stylesheet. You can do that either from designer or from code. Here's a code example:

      ui->someFrame->setObjectName("Foo");
      ui->someFrame->setStyleSheet("#Foo { border-top: 2px solid black; }");
      
      1 Reply Last reply
      2
      • P Offline
        P Offline
        PhantomR
        wrote on 6 May 2017, 00:01 last edited by PhantomR 5 Jun 2017, 00:10
        #3

        @Chris-Kawa Thank you very much, it seems to work. Sadly, now I've run into another problem: I've got a QTableWidget with 2 columns and it has 2 entries. In all the 4 occupied columns, I have QFrames (the first column contains objects of a class that extends QFrame and the other column objects of another class that extends QFrame). I tried using the setObjectName, setStyleSheet you provided in both these classes (even tried different object names for them), but the borders (top and bottom, I've only changed those) for the item in the second entry, second column, do not display properly (they seem like translated, in that they seem to have proper distance between them, but they're considerably lower (maybe more than 5p or even 10p?) than they should be. Could this be cause by the fact that I've called QTableWidget::resizeColumnsToContents() or something?

        The code I've used for one of the classes is [I've done this in THE classes themselves, calling the two methods in the constructor just as I've shown, NOT outside. I hope this is not wrong] :
        setObjectName("Foo");
        setStyleSheet("#Foo { border-top: 2px solid black; border-bottom: 2px solid black; }");
        and for the other:
        setObjectName("Foo2");
        setStyleSheet("#Foo2 { border-top: 2px solid black; border-bottom: 2px solid black; }");

        This is pretty much how it would look (please ignore the unclear text under/over the top problematic porder and the red underline, those are because of my editing of the photo)

        EDIT: I'm setting the widgets in the cells using the setCellWidget method of QTableWidget.
        EDIT2: If I open the problematic QFrame with the .show method in the main method, it displays its borders properly (just like it's displayed in the first entry of the table). I wonder what's causing this.
        EDIT3: Adding more entries to the table seems to have the same effect: only the first entry is shown properly, the others having the same problem.

        Borders problem

        1 Reply Last reply
        0
        • P Offline
          P Offline
          PhantomR
          wrote on 6 May 2017, 00:15 last edited by PhantomR 5 Jun 2017, 00:17
          #4

          Regarding the problem in the post just above, apparently it works properly if I call QTableWidget::resizeRowsToContents() and QTableWidget::resizeColumnsToContents() after adding each new entry (maybe I should just call them for the newly added entry to be more efficient (resizeRowToContents and resizeColumnToContents).

          EDIT:
          @Chris-Kawa I don't know why I can't flag your post as the answer to my question :(. Still, I've upvoted it and marked the topic as solved. Thank you for your help :).

          1 Reply Last reply
          0
          • C Online
            C Online
            Chris Kawa
            Lifetime Qt Champion
            wrote on 6 May 2017, 00:41 last edited by Chris Kawa
            #5

            I don't know why calling resizeRowsToContents after each widget would help. Seems a bad idea for performance.
            Anyway, I was toying around and made a small example that more or less reflects what you have in the picture. It doesn't seem to suffer from the issue you brought up. Maybe you can use any of it.

            int main(int argc, char *argv[])
            {
                QApplication a(argc, argv);
            
                QTableWidget w;
                w.setColumnCount(2);
                w.setRowCount(2);
                w.verticalHeader()->hide();
                w.horizontalHeader()->setStretchLastSection(true);
                w.setHorizontalHeaderLabels({ "Author", "Message" });
                w.setStyleSheet("#Foo { border-top: 2px solid black; border-bottom: 2px solid black; }");
                w.show();
            
                for (int row = 0; row < 2; ++row)
                    for (int col = 0; col < 2; ++col)
                    {
                        auto lay = new QGridLayout();
            
                        if (col == 1)
                        {
                            lay->addWidget(new QLabel("Sent:"), 0, 0);
                            lay->addWidget(new QPushButton("Quote"), 0, 1);
                            lay->addWidget(new QLabel(), 2, 0);
                            lay->setColumnStretch(0, 1);
                            lay->setColumnStretch(1, 0);
                            auto line = new QFrame();
                            line->setFrameShape(QFrame::HLine);
                            lay->addWidget(line, 1, 0, 1, 2);
                        }
            
                        auto frame = new QFrame();
                        frame->setLayout(lay);
                        frame->setObjectName("Foo");
                        w.setCellWidget(row, col, frame);
                    }
            
                w.resizeRowsToContents();
                return a.exec();
            }
            

            The result is something like this:

            table widget example

            1 Reply Last reply
            1
            • P Offline
              P Offline
              PhantomR
              wrote on 6 May 2017, 15:54 last edited by
              #6

              Thtat's interesting. Thank you very much. I wonder if the problem could have been caused by the fact that initially, my QFrames were QWidgets and then I modified the files (.h, .cpp, .ui) in order to make them QFrames so that I could use the border.

              1 Reply Last reply
              0
              • C Online
                C Online
                Chris Kawa
                Lifetime Qt Champion
                wrote on 7 May 2017, 10:25 last edited by
                #7

                You don't need a QFrame to style the borders using qss. Plain QWidget can have borders too.

                1 Reply Last reply
                0

                2/7

                5 May 2017, 23:30

                5 unread
                • Login

                • Login or register to search.
                2 out of 7
                • First post
                  2/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved