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. QTableView ... Qt Creator stylesheet

QTableView ... Qt Creator stylesheet

Scheduled Pinned Locked Moved Solved General and Desktop
16 Posts 3 Posters 13.5k 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.
  • G Offline
    G Offline
    gfxx
    wrote on 23 Nov 2017, 16:13 last edited by
    #1

    I'm able to customize the QTableview window in the QT Creator stylesheet editor .... but not find the property for access verticalScrollBar style ... I try with these vithout success ...

    QTableView{border: 3px ; /*other code about padding background stc*/ ;}
    QTableView::item:focus{selection-background-color: yellow;}
    QTableView:verticalScrollBar{width: 30px; color:black; /*just for try*/}
    

    But nothings appens .... no error no modifications ...

    any suggest is appreciate, because I'm not find the right property syntax.

    re

    bkt

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mrjj
      Lifetime Qt Champion
      wrote on 23 Nov 2017, 16:20 last edited by mrjj
      #2

      Hi
      its not a subcontrol as such.
      Its a widget on its own. (stylesheet wise)
      (note its horizontal :) )

      myListView->setStyleSheet(QString("QScrollBar:horizontal { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; }"));
      
      1 Reply Last reply
      2
      • G Offline
        G Offline
        gfxx
        wrote on 23 Nov 2017, 17:30 last edited by gfxx
        #3

        ok ... ok ... but if I want to customize QTableView with verticalScrollBarr alwaysOn how do I customize the scroll bar?

        ui->mytabWidget->setStylesheet("QTableView{border: /* some definition*/;}")
        ui->mytabWidget->setStylesheet("QScrollBar:vertical { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; }"));
        

        these is right????

        regards
        Giorgio

        bkt

        M 1 Reply Last reply 23 Nov 2017, 22:03
        0
        • S Offline
          S Offline
          SGaist
          Lifetime Qt Champion
          wrote on 23 Nov 2017, 22:01 last edited by
          #4

          Hi,

          No, the second call will overwrite the style sheet from the first call. You should put the complete style sheet in one string.

          Interested in AI ? www.idiap.ch
          Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

          G 1 Reply Last reply 28 Nov 2017, 14:07
          1
          • G gfxx
            23 Nov 2017, 17:30

            ok ... ok ... but if I want to customize QTableView with verticalScrollBarr alwaysOn how do I customize the scroll bar?

            ui->mytabWidget->setStylesheet("QTableView{border: /* some definition*/;}")
            ui->mytabWidget->setStylesheet("QScrollBar:vertical { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; }"));
            

            these is right????

            regards
            Giorgio

            M Offline
            M Offline
            mrjj
            Lifetime Qt Champion
            wrote on 23 Nov 2017, 22:03 last edited by mrjj
            #5

            @gfxx
            Hi
            Yes except it has to be inside same string.
            The code you show set stylesheet twice and only last one counts.
            alt text

            From code you can do

             QString style = R"(
                            QScrollBar:vertical {
                             background: #32CC99;
                            }
                            QScrollBar:horizontal {
                             background: #FF0000;
                            }
                           )";
            
            ui->tableWidget->setStyleSheet(style);
            

            Note that your sample says mytabWidget->setStylesheet("QTableView
            Make sure to use right type for the actual one you will use.

            1 Reply Last reply
            1
            • G Offline
              G Offline
              gfxx
              wrote on 27 Nov 2017, 09:38 last edited by
              #6

              I've try these with some success ...

              0_1511775029328_QTableVidget.png

              but not success about ```

              QScrollBar:vertical::up-arrow{image:/myimage up path/; with:40px; height:40px;}
              QScrollBar:vertical::down-arrow{image:/myimage down path/; with:40px; height:40px;}
              QScrollBar:vertical::handle{ border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background: blu;with:40px; height:80px;}

              
              the slider Become too little (beacuse I have meny row in table) and seems not bring the "height" sub control measure ...
              
              regards
              Giorgio

              bkt

              1 Reply Last reply
              0
              • G Offline
                G Offline
                gfxx
                wrote on 27 Nov 2017, 10:29 last edited by
                #7

                I try these .... my image is 24*24px ...

                0_1511778493673_QTableView-1.png

                0_1511778511459_the-result.png

                Obviusly, because not so familiar with css subcontrol I makesome error but I'm unable see where and what.

                regards and thanks for the help.

                giorgio

                bkt

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on 27 Nov 2017, 10:33 last edited by
                  #8

                  Hi
                  Are you sure it can load the images ?

                  Maybe this can be inspiration
                  https://stackoverflow.com/questions/12438095/qt-vertical-scroll-bar-stylesheets

                  G 2 Replies Last reply 27 Nov 2017, 14:58
                  0
                  • M mrjj
                    27 Nov 2017, 10:33

                    Hi
                    Are you sure it can load the images ?

                    Maybe this can be inspiration
                    https://stackoverflow.com/questions/12438095/qt-vertical-scroll-bar-stylesheets

                    G Offline
                    G Offline
                    gfxx
                    wrote on 27 Nov 2017, 14:58 last edited by
                    #9

                    @mrjj I'm sure .... try to play aroud your linked snippets ....

                    thanks ... i hope can able to post a solution in a small time.

                    giorgio

                    bkt

                    1 Reply Last reply
                    0
                    • M mrjj
                      27 Nov 2017, 10:33

                      Hi
                      Are you sure it can load the images ?

                      Maybe this can be inspiration
                      https://stackoverflow.com/questions/12438095/qt-vertical-scroll-bar-stylesheets

                      G Offline
                      G Offline
                      gfxx
                      wrote on 28 Nov 2017, 13:14 last edited by gfxx
                      #10

                      @mrjj these code have somethings that I not understand:

                      QTableView {border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px;border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px;}
                      QTableView::item:focus{selection-background-color: yellow;}
                      QScrollBar:vertical{ width: 35px; background: none; /* only these sort effect about width ...*/}
                      QScrollBar::handle:vertical{ border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee ); width: 25px; min-height: 20px; max-height: 25px; /*these sort no effect*/ }
                      QScrollBar::add-page:vertical {border: 3px solid red;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background:  red; /* adding width: xx px; sorting no effect .. why? */}
                      QScrollBar::sub-page:vertical {border: 3px solid green;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background:  green; /* adding width: xx px; sorting no effect .. why? */ }
                      

                      the result ......

                      bkt

                      G 1 Reply Last reply 28 Nov 2017, 13:18
                      0
                      • G gfxx
                        28 Nov 2017, 13:14

                        @mrjj these code have somethings that I not understand:

                        QTableView {border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px;border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px;}
                        QTableView::item:focus{selection-background-color: yellow;}
                        QScrollBar:vertical{ width: 35px; background: none; /* only these sort effect about width ...*/}
                        QScrollBar::handle:vertical{ border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee ); width: 25px; min-height: 20px; max-height: 25px; /*these sort no effect*/ }
                        QScrollBar::add-page:vertical {border: 3px solid red;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background:  red; /* adding width: xx px; sorting no effect .. why? */}
                        QScrollBar::sub-page:vertical {border: 3px solid green;text-align: top;padding: 4px;border-radius: 5px; border-bottom-left-radius: 5px;background:  green; /* adding width: xx px; sorting no effect .. why? */ }
                        

                        the result ......

                        G Offline
                        G Offline
                        gfxx
                        wrote on 28 Nov 2017, 13:18 last edited by
                        #11

                        0_1511875085899_QScrollBar-125.png

                        bkt

                        1 Reply Last reply
                        0
                        • S SGaist
                          23 Nov 2017, 22:01

                          Hi,

                          No, the second call will overwrite the style sheet from the first call. You should put the complete style sheet in one string.

                          G Offline
                          G Offline
                          gfxx
                          wrote on 28 Nov 2017, 14:07 last edited by
                          #12

                          @SGaist ok and if use QT Creator stylesheet property windows is the same?

                          regards
                          giorgio

                          bkt

                          1 Reply Last reply
                          0
                          • M Offline
                            M Offline
                            mrjj
                            Lifetime Qt Champion
                            wrote on 28 Nov 2017, 14:58 last edited by
                            #13

                            Hi
                            Not sure all sub controls ( like QScrollBar::add-page:vertical ) supports
                            width.

                            You can see where what they have used
                            http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qscrollbar

                            G 2 Replies Last reply 29 Nov 2017, 11:22
                            1
                            • M mrjj
                              28 Nov 2017, 14:58

                              Hi
                              Not sure all sub controls ( like QScrollBar::add-page:vertical ) supports
                              width.

                              You can see where what they have used
                              http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qscrollbar

                              G Offline
                              G Offline
                              gfxx
                              wrote on 29 Nov 2017, 11:22 last edited by
                              #14

                              @mrjj said in QTableView ... Qt Creator stylesheet:

                              You can see where what they have used

                              thanks
                              Girgio

                              bkt

                              1 Reply Last reply
                              1
                              • M mrjj
                                28 Nov 2017, 14:58

                                Hi
                                Not sure all sub controls ( like QScrollBar::add-page:vertical ) supports
                                width.

                                You can see where what they have used
                                http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qscrollbar

                                G Offline
                                G Offline
                                gfxx
                                wrote on 2 Dec 2017, 17:10 last edited by
                                #15

                                @mrjj finally I solve my issue in these way;

                                QTableView {border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px;border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px;}
                                QTableView::item:focus{selection-background-color: yellow;}
                                
                                
                                 QScrollBar{
                                         background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );
                                 }
                                
                                 QScrollBar:vertical {
                                     border: 3px solid #5E749C;
                                     padding: 4px;
                                     border-radius: 7px;
                                     border-bottom-left-radius: 7px;
                                     background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );
                                     width: 45px;
                                     margin: 48px 0 48px 0;
                                 }
                                
                                 QScrollBar::handle:vertical {
                                     background: dark blue;
                                     border: 3px solid #5E749C;
                                     padding: 0px;
                                     border-radius: 7px;
                                     border-bottom-left-radius: 7px;
                                     min-height: 40px;
                                 }
                                 QScrollBar::add-line:vertical {
                                     background: dark blue;
                                     border: 3px solid #5E749C;
                                     padding: 0px;
                                     border-radius: 7px;
                                     border-bottom-left-radius: 7px;
                                     height: 40px;
                                     subcontrol-position: bottom;
                                     subcontrol-origin: margin;
                                 }
                                
                                 QScrollBar::sub-line:vertical {
                                     background: dark blue;
                                     border: 3px solid #5E749C;
                                     padding: 0px;
                                     border-radius: 7px;
                                     border-bottom-left-radius: 7px;
                                     height: 40px;
                                     subcontrol-position: top;
                                     subcontrol-origin: margin;
                                 }
                                 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
                                     border: 2px solid grey;
                                     width: 3px;
                                     height: 3px;
                                     background: white;
                                 }
                                
                                 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
                                     background: none;
                                 }
                                

                                but the result about the hole in my background not make my happy ... show these:

                                0_1512234627110_QTableview_hole.png

                                bkt

                                G 1 Reply Last reply 3 Dec 2017, 12:53
                                1
                                • G gfxx
                                  2 Dec 2017, 17:10

                                  @mrjj finally I solve my issue in these way;

                                  QTableView {border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px;border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px;}
                                  QTableView::item:focus{selection-background-color: yellow;}
                                  
                                  
                                   QScrollBar{
                                           background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );
                                   }
                                  
                                   QScrollBar:vertical {
                                       border: 3px solid #5E749C;
                                       padding: 4px;
                                       border-radius: 7px;
                                       border-bottom-left-radius: 7px;
                                       background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );
                                       width: 45px;
                                       margin: 48px 0 48px 0;
                                   }
                                  
                                   QScrollBar::handle:vertical {
                                       background: dark blue;
                                       border: 3px solid #5E749C;
                                       padding: 0px;
                                       border-radius: 7px;
                                       border-bottom-left-radius: 7px;
                                       min-height: 40px;
                                   }
                                   QScrollBar::add-line:vertical {
                                       background: dark blue;
                                       border: 3px solid #5E749C;
                                       padding: 0px;
                                       border-radius: 7px;
                                       border-bottom-left-radius: 7px;
                                       height: 40px;
                                       subcontrol-position: bottom;
                                       subcontrol-origin: margin;
                                   }
                                  
                                   QScrollBar::sub-line:vertical {
                                       background: dark blue;
                                       border: 3px solid #5E749C;
                                       padding: 0px;
                                       border-radius: 7px;
                                       border-bottom-left-radius: 7px;
                                       height: 40px;
                                       subcontrol-position: top;
                                       subcontrol-origin: margin;
                                   }
                                   QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
                                       border: 2px solid grey;
                                       width: 3px;
                                       height: 3px;
                                       background: white;
                                   }
                                  
                                   QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
                                       background: none;
                                   }
                                  

                                  but the result about the hole in my background not make my happy ... show these:

                                  0_1512234627110_QTableview_hole.png

                                  G Offline
                                  G Offline
                                  gfxx
                                  wrote on 3 Dec 2017, 12:53 last edited by
                                  #16

                                  THESE RESULT IS ON UBUNTU 16 AND QT5.8 .... ON UBUNTU 14 AND QT5.6 the scrollBar is outside the table area ... so the result is perfect..... maybe these depends on pathers widget and it's css settings.

                                  For me the problem is Solved.

                                  regards
                                  giorgio

                                  bkt

                                  1 Reply Last reply
                                  1

                                  10/16

                                  28 Nov 2017, 13:14

                                  • Login

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