13

How to hide QScrollBar arrows?

I need to hide in horizontal scrollbar. I was trying to hide with setStyleSheet:

setStyleSheet(" QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal { height:0px; }" )

but it doesn't work.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
programtg
  • 133
  • 1
  • 5
  • Do you mean just the arrows or the buttons containing the arrows? – thuga Jan 16 '14 at 09:29
  • I've tryed in QtDesigner to customize scroll bar and it seems that style sheets for scroll bar in Qt have a difficult history. You can't change just arrow style for it. You should reimplement style for EVERYTHING in QScrollBar, and only then style will be changed. See example here: http://qt-project.org/doc/qt-5/stylesheet-examples.html#customizing-qscrollbar . Copying whole example works. Only arrows part — does not. Thats odd I believe. – Pie_Jesu Jan 17 '14 at 06:18

4 Answers4

14

If you need to hide just the arrows inside buttons then you can try to set background and border in this way:

QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
      border: none;
      background: none;
      color: none;
}

If you want to hide whole buttons then you go with code below.

QScrollBar::add-line:horizontal {
      border: none;
      background: none;
}

QScrollBar::sub-line:horizontal {
      border: none;
      background: none;
}
nayana
  • 3,787
  • 3
  • 20
  • 51
9

I know this is an old question, but I've ran into an issue with this question's approved answer, and I've found a fix for it so I'm going to leave this here in case someone runs into the same problem that I did.

While the accepted answer suggests setting border, background and color to none, this only visually hides the scrollbar arrows. What I mean by this is that you can still click them, and the scrollbar's handle, while it can move to the place they occupied, can not be clicked on if your cursor is in the area the arrow buttons occupied.

To also functionally hide them, you should set their width and height styles to 0px as well. This will make it so you can click on the handle if the scrollbar's handle is in the area the arrow-buttons occupied.

micka190
  • 742
  • 2
  • 8
  • 20
1

In order to hide a scroll bar you can set the scroll bar policy for that particular scroll bar (horizontal in your case). For example:

QScrollBar scrollBar;
scrollBar.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
vahancho
  • 20,808
  • 3
  • 47
  • 55
1

Create a QScrollBar and assign it this stylesheet and this should do the trick. See example below.

QScrollBar:vertical {
  width: 15px;
  background: #f1f1f1;
}

QScrollBar::handle:vertical {
  background: #888;
}

QScrollBar::add-line:vertical {
  border: 2px solid gray;
  background: #f1f1f1;
}

QScrollBar::sub-line:horizontal {
  border: 2px solid gray;
  background: #f1f1f1;
}

QScrollBar::handle:hover:vertical {
  background: #555;
}
barbsan
  • 3,418
  • 11
  • 21
  • 28
  • create a QScrollBar and assign it this style sheet and this should do the trick. oh and you are free to change the settings freely – user11738998 Jul 04 '19 at 10:13
  • 1
    Welcome to SO, instead of commenting please edit your answers to include an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. – Android Jul 04 '19 at 10:29