CODEWITHSUNDEEP
pythonpyqtpyqt5
tckraomuqnt
tckraomuqnt

Reputation: 492

How to change the Scrollbars Arrow Keys in PyQt5?

Using the following code to set the style for vertical Qscrollbar. It gives the appearance/result as attached photo. I want to change the up and down arrow from Square to the actual up arrow ( triangle) on top and the down arrow at the bottom(inverse triangle). How to obtain it?

enter image description here

   QScrollBar:vertical {
   background: rgb(220,220,220);
   width: 15px;
   margin: 22px 0 22px 0; }

   QScrollBar::handle:vertical {
   background: rgb(169,169,169);
   min-height: 10px; }
   
   QScrollBar::add-line:vertical {
   border: 0px solid grey;
   background: rgb(220,220,220);
   height: 20px;
   subcontrol-position: bottom;
   subcontrol-origin: margin; }

   QScrollBar::sub-line:vertical {
   border: 0px solid red;
   background: rgb(220,220,220);
   height: 20px;
   subcontrol-position: top;
   subcontrol-origin: margin;}
   
   QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
   border: 0px solid red;
   display: ᐃ
   width: 5px;
   height: 5px;
   background:black;}

Upvotes: 1

Views: 798

Answers (2)

bfris
bfris

Reputation: 5805

In addition to manually supplying images for arrows, you could try different window styles. If you use Designer for your app, you can preview styles from Form...Preview In -> Style. It's hard to find in the docs, but if you look here, there are some styles.

In your code you do it at the app level:

if __name__ == '__main__':
    app = QApplication(sys.argv)
    app.setStyle(QStyleFactory.create('fusion'))

Upvotes: 1

Maxim Paperno
Maxim Paperno

Reputation: 4859

You must use images to get arrow icons.

QScrollBar::right-arrow,
QScrollBar::left-arrow,
QScrollBar::up-arrow,
QScrollBar::down-arrow {
    width: 12px;
    height: 12px;
    background: black;
}

QScrollBar::right-arrow {
    image: url("://icons/theme-dark/caret_right.svg");
}
QScrollBar::left-arrow {
    image: url("://icons/theme-dark/caret_left.svg");
}
QScrollBar::up-arrow {
    image: url("://icons/theme-dark/caret_up.svg");
}
QScrollBar::down-arrow {
    image: url("://icons/theme-dark/caret_down.svg");
}

The images can be anything, in any format Qt supports (png, jpg, gif, etc). The above URL syntax uses images embedded in an included Qt resource file (but they could also be file:// URLs, or actual network requests (http/s, etc)).

You do not need the :vertical or :horizontal qualifiers (the elements are already "directional"). Also the way you're using display is incorrect, and besides Qt doesn't support it anyway (nor content which is I think what you meant).

Upvotes: 1

Related Questions