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.
  • gfxxG Offline
    gfxxG Offline
    gfxx
    wrote on 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
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on 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
      • gfxxG Offline
        gfxxG Offline
        gfxx
        wrote on 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

        mrjjM 1 Reply Last reply
        0
        • SGaistS Offline
          SGaistS Offline
          SGaist
          Lifetime Qt Champion
          wrote on 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

          gfxxG 1 Reply Last reply
          1
          • gfxxG gfxx

            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

            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on 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
            • gfxxG Offline
              gfxxG Offline
              gfxx
              wrote on 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
              • gfxxG Offline
                gfxxG Offline
                gfxx
                wrote on 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
                • mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on 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

                  gfxxG 2 Replies Last reply
                  0
                  • mrjjM mrjj

                    Hi
                    Are you sure it can load the images ?

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

                    gfxxG Offline
                    gfxxG Offline
                    gfxx
                    wrote on 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
                    • mrjjM mrjj

                      Hi
                      Are you sure it can load the images ?

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

                      gfxxG Offline
                      gfxxG Offline
                      gfxx
                      wrote on 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

                      gfxxG 1 Reply Last reply
                      0
                      • gfxxG gfxx

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

                        gfxxG Offline
                        gfxxG Offline
                        gfxx
                        wrote on last edited by
                        #11

                        0_1511875085899_QScrollBar-125.png

                        bkt

                        1 Reply Last reply
                        0
                        • SGaistS SGaist

                          Hi,

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

                          gfxxG Offline
                          gfxxG Offline
                          gfxx
                          wrote on 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
                          • mrjjM Offline
                            mrjjM Offline
                            mrjj
                            Lifetime Qt Champion
                            wrote on 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

                            gfxxG 2 Replies Last reply
                            1
                            • mrjjM mrjj

                              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

                              gfxxG Offline
                              gfxxG Offline
                              gfxx
                              wrote on 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
                              • mrjjM mrjj

                                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

                                gfxxG Offline
                                gfxxG Offline
                                gfxx
                                wrote on 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

                                gfxxG 1 Reply Last reply
                                1
                                • gfxxG gfxx

                                  @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

                                  gfxxG Offline
                                  gfxxG Offline
                                  gfxx
                                  wrote on 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

                                  • Login

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