QScrollBar - Hiding add-line and sub-line when moved

[mat_de_b]

I am having a problem attempting to customise the stylesheet for my QScrollBars.

I have added images in the stylesheet for the handle, add-line and sub-line. However when i move the handle it is hiding the add-line/sub-line images and is creating a shadow at either end. I have set the background colour as green to emphasise the problem.

The left most image shows the scroll bar as you would expect, however the images are then covered as the scroll bar is moved.

This is my style sheet:

QScrollBar{
    background-color: rgb(108, 225, 12);
    width: 16px;
    margin: 0;
}

QScrollBar::handle:vertical{
    background-image: url(:/bar-handle.png);
    margin: 16 0 16 0;
}

QScrollBar::add-line{

    background-image: url(:/bbottom);
    height: 16px;

    subcontrol-position:bottom;
    subcontrol-origin: margin;

}

QScrollBar::sub-line{

    image: url(:/bar-end.png);
    height: 16px;

    subcontrol-position: top;
    subcontrol-origin: margin;
}

How do i get it to have normal scroll bar behaviour, where the buttons are always shown at the top and bottom and the handle does not have shading above and below it?

Thank you very much for any of your help,

Mat

[mrjj]

Hi and welcome
I think you might need to set margin for inner area
The following works for me with 32x32 images for the ends

/*inner area*/
QScrollBar::vertical  {
     border: 1px solid #a5a5a5;
     background: none;
     width: 65px;
     margin: 42px 0 42px 0; /* match top/lower area*/
 }

/*the knob*/
 QScrollBar::handle:vertical {
     background: #d5d5d5;;
 	 border: 2px solid #000000;
     min-height: 60px;	
	 border-radius: 12px;
 }

/*lower arrow area*/
 QScrollBar::add-line:vertical {
     border: 0px solid grey;
     background: NONE;
     height: 40px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

/*top arrow area*/
 QScrollBar::sub-line:vertical {
     border: 0px solid grey;
     background: none;
     height: 40px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }

/*arrows*/
 QScrollBar::up-arrow:vertical  {
	 image:  url(:/GFX/sbar/up_arrow_scrollbar.png);
}
/*pressed*/
QScrollBar::up-arrow:vertical::pressed  {
	 image:  url(:/GFX/sbar/up_arrow_scrollbar_pressed.png);
}

QScrollBar::down-arrow:vertical::pressed  {
	 image:  url(:/GFX/sbar/down_arrow_scrollbar_pressed.png);
}

QScrollBar::down-arrow:vertical {
    /* border: 2px solid grey;
     width: 3px;
     height: 23px;  */
	 image:  url(:/GFX/sbar/down_arrow_scrollbar.png);
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }