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. How to remove focus rectangle on QListView and similar using QStyledItemDelegate with style sheets?

How to remove focus rectangle on QListView and similar using QStyledItemDelegate with style sheets?

Scheduled Pinned Locked Moved General and Desktop
17 Posts 8 Posters 35.4k 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
    giowck
    wrote on last edited by
    #1

    I'm trying to get rid of the ugly focus rectangle on windows and linux shown on the focused item in a QListView.
    There are many solution on the web, the reimplementation of the QStyledItemDelegate::paint() method to unset the focus state works great unless you are using style sheets on the QListView.

    So my question. Is there a way to disable the focus rectangle without losing the possibility of using style sheets?

    Thank you

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mbnoimi
      wrote on last edited by
      #2

      I looked for a practical solution too but unfortunately I got nothing; but some guy filed a feature request in this link: https://bugreports.qt-project.org/browse/QTBUG-4281 I wish to get the interest by Digia or Qt community

      1 Reply Last reply
      0
      • ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #3

        hello,
        have you tried this approach:
        @myListView->setStyleSheet("QListView::item:focus{border:none;}")@

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mbnoimi
          wrote on last edited by
          #4

          [quote author="SeitsemaN" date="1377905416"]hello,
          have you tried this approach:
          @myListView->setStyleSheet("QListView::item:focus{border:none;}")@
          [/quote]

          This is absolutely incorrect! Have you tried it before suggestion?!

          1 Reply Last reply
          0
          • SGaistS Offline
            SGaistS Offline
            SGaist
            Lifetime Qt Champion
            wrote on last edited by
            #5

            Did you take a look at the "style sheet example for customizing QListView":http://qt-project.org/doc/qt-4.8/stylesheet-examples.html#customizing-qlistview ?

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

            1 Reply Last reply
            0
            • M Offline
              M Offline
              mbnoimi
              wrote on last edited by
              #6

              [quote]Did you take a look at the style sheet example for customizing QListView[/quote]
              Sure, no mentioning about focus removing by stylesheet!

              1 Reply Last reply
              0
              • SGaistS Offline
                SGaistS Offline
                SGaist
                Lifetime Qt Champion
                wrote on last edited by
                #7

                To make things clear: the focus rectangle is when you select an item or hover it ? Both ?

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

                1 Reply Last reply
                0
                • Chris KawaC Offline
                  Chris KawaC Offline
                  Chris Kawa
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

                  Can you give a specific example of the stylesheet that doesn't work?

                  I tried this with the delegate:
                  @
                  void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
                  {
                  QStyleOptionViewItem option2 = option;
                  option2.state = option.state & (~QStyle::State_HasFocus);
                  QStyledItemDelegate::paint(painter, option2, index);
                  }
                  @
                  and it doesn't affect stylesheets at all, i.e. thay still work as expected. For example this
                  @
                  listWidget->setStyleSheet("QListView::item:selected { color: red; background-color: yellow; }");
                  @
                  still colors the selected items.

                  Btw. the focus rectangle, ugly as it may be, is an important usability feature. Think twice before removing it.

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    mbnoimi
                    wrote on last edited by
                    #9

                    [quote]
                    To make things clear: the focus rectangle is when you select an item or hover it ? Both ?
                    [/quote]
                    It's exactly the active item after selecting it.

                    By code you can get hell of it by using:
                    [code]setFocusPolicy(Qt::NoFocus);[/code]

                    But this solution isn't practical because you've to set it for each widget in the GUI; For that I prefer to use stylesheet instead.

                    1 Reply Last reply
                    0
                    • ? Offline
                      ? Offline
                      A Former User
                      wrote on last edited by
                      #10

                      I could disable focus rect by adding this line to my .qss file:
                      *{outline: none;}
                      At least it worked for all buttons in the app.

                      1 Reply Last reply
                      1
                      • M Offline
                        M Offline
                        mbnoimi
                        wrote on last edited by
                        #11

                        [quote author="SeitsemaN" date="1378298986"]I could disable focus rect by adding this line to my .qss file:
                        *{outline: none;}
                        At least it worked for all buttons in the app.[/quote]

                        This solution doesn’t\t fix the issue because it works for single type of widgets (ex. it doesn't fix QListWidget issue!)

                        1 Reply Last reply
                        0
                        • ? Offline
                          ? Offline
                          A Former User
                          wrote on last edited by
                          #12

                          I'm afraid there is no way of getting rid of this focus rect through the style sheet. Howewer, you can implement your own QStyle (or use QProxyStyle) like this:
                          @
                          #include <QApplication>
                          #include <QProxyStyle>
                          #include "MyMainWindow.h"
                          class MyProxyStyle : public QProxyStyle
                          {
                          public:
                          virtual void drawPrimitive(PrimitiveElement element, const QStyleOption * option,
                          QPainter * painter, const QWidget * widget = 0) const
                          {
                          if (PE_FrameFocusRect == element)
                          {
                          /// do not draw focus rectangle
                          }
                          else
                          {
                          QProxyStyle::drawPrimitive(element, option,painter, widget);
                          }
                          }
                          };

                          int main(int argc, char **argv)
                          {
                          QApplication a(argc, argv);
                          a.setStyle(new MyProxyStyle);
                          MyMainWindow mw;
                          mw.resize(700, 800);
                          mw.show();
                          }
                          @
                          Btw, this is slightly modified vesrion of what you can find in Qt Assistant.
                          This worked for my test app (Qt5.1.1) with QListView and QListWidget.

                          1 Reply Last reply
                          0
                          • M Offline
                            M Offline
                            mbnoimi
                            wrote on last edited by
                            #13

                            [quote]I’m afraid there is no way of getting rid of this focus rect through the style sheet.[/quote]
                            For that we files a suggestion to add this feature.

                            [quote]Howewer, you can implement your own QStyle (or use QProxyStyle)[/quote]
                            Actually it really the hard way to do it (although it fix it)

                            1 Reply Last reply
                            0
                            • B Offline
                              B Offline
                              blueshift
                              wrote on last edited by
                              #14

                              Hi glowc,
                              You must use @QListView
                              {
                              outline: none;
                              }@

                              1 Reply Last reply
                              0
                              • M Offline
                                M Offline
                                mbnoimi
                                wrote on last edited by
                                #15

                                [quote author="blueshift" date="1379779695"]Hi glowc,
                                You must use @QListView
                                {
                                outline: none;
                                }@[/quote]

                                It doesn't behave just like setFocusPolicy

                                1 Reply Last reply
                                0
                                • H Offline
                                  H Offline
                                  hkjin81
                                  wrote on last edited by
                                  #16

                                  [quote author="blueshift" date="1379779695"]Hi glowc,
                                  You must use @QListView
                                  {
                                  outline: none;
                                  }@[/quote]

                                  I think this is the answer of the question.

                                  It doesn't behave just like setFocusPolicy but that's what glowck wants.

                                  glowck(and I) just want to remove unnecessary ugly rectangle(appearance) because it's replaced by color, image or something. If it behaves like setFocusPolicy I can't select in the list.

                                  Thanks blueshift, it solved my problem.

                                  1 Reply Last reply
                                  0
                                  • OddoO Offline
                                    OddoO Offline
                                    Oddo
                                    wrote on last edited by
                                    #17

                                    Thank you so much blueshift! I was going out mad!
                                    :)

                                    1 Reply Last reply
                                    0

                                    • Login

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