Qt: Applying stylesheet on QScrollArea making horizontal scrollbar disappear but working perfectly for vertical scrollbar

Question

I am trying to apply some style-sheet for scrollbars of QScrollArea and my style sheet as follows.

QScrollBar:vertical {

  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;

  background-color: rgb(240, 240, 240);
  width: 15px;
  margin: 21px 0 21px 0;
}

QScrollBar::handle:vertical {

  background-color: rgb(200, 200, 200);
  min-height: 25px;

}

 QScrollBar::add-line:vertical {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}


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

QScrollBar::up-arrow:vertical
{
  image: url(:/BarIcon/Icons/uparrow.png);
}

QScrollBar::down-arrow:vertical
{
  image: url(:/BarIcon/Icons/downarrow.png);
}

QScrollBar:horizontal {
  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;
  background-color: rgb(240, 240, 240);
    width: 15px;
    margin: 0px 21px 0 21px;
 }

 QScrollBar::handle:horizontal {
    background-color: rgb(200, 200, 200);
    min-height: 25px;
 }
QScrollBar::add-line:horizontal {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal {
  border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
 }

 QScrollBar:left-arrow:horizontal
{
  image: url(:/BarIcon/Icons/leftarrow.png);
}

QScrollBar::right-arrow:horizontal 
{
  image: url(:/BarIcon/Icons/rightarrow.png);
}

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

This stylesheet perfectly does what it was supposed to for vertical scrollbar but with presence of any single stylesheet related to QScrollBar:horizontal, the bar just disappears.

Please can anyone point out my flaw and what should I do?

Notes: The styleSheet have been applied on QScrollArea object by using Change styleSheet option of Qt Designer.

And please kindly acknowledge in case where the horizontal scrollbar shows up with this styleSheet on.

Solution

You are lucky, the same thing just happened to me today.

This really simple, this is because you just copy-past your vertical style for the horizontal and just change the word "vertical" to "horizontal", but actually there is a few more things to change:

• The "width" parameters become "height" in horizontal.
• The "height" parameters become "width".
• "top" and "bottom" become "left" and "right" (that you did).
• Also, if you have asymmetrical margins or such, don't forget to adapt them (you did that too).

This gives the following stylesheet for your particular case:

QScrollBar:vertical {

  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;

  background-color: rgb(240, 240, 240);
  width: 15px;
  margin: 21px 0 21px 0;
}

QScrollBar::handle:vertical {

  background-color: rgb(200, 200, 200);
  min-height: 25px;

}

 QScrollBar::add-line:vertical {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}


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

QScrollBar::up-arrow:vertical
{
  image: url(:/BarIcon/Icons/uparrow.png);
}

QScrollBar::down-arrow:vertical
{
  image: url(:/BarIcon/Icons/downarrow.png);
}

QScrollBar:horizontal {
  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;
  background-color: rgb(240, 240, 240);
    height: 15px;
    margin: 0px 21px 0 21px;
 }

 QScrollBar::handle:horizontal {
    background-color: rgb(200, 200, 200);
    min-width: 25px;
 }
QScrollBar::add-line:horizontal {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal {
  border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
 }

 QScrollBar:left-arrow:horizontal
{
  image: url(:/BarIcon/Icons/leftarrow.png);
}

QScrollBar::right-arrow:horizontal 
{
  image: url(:/BarIcon/Icons/rightarrow.png);
}

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