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
Forum Updated to NodeBB v4.3 + New Features

QTableView ... Qt Creator stylesheet

Scheduled Pinned Locked Moved Solved General and Desktop
16 Posts 3 Posters 13.8k Views 2 Watching
  • 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.
  • 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