Search code examples
c++qtstylesheet

QTabWidget styling - missing the bottom of my 'g...s'


I currently have the following style-sheet for my QtabWidget

QTAB

QTabWidget
{
  /*   min-width:5000em;*/
}


 QTabWidget::tab-bar 
{
     left: 5px; /* move to the right by 5px */
 }


 QTabWidget::pane
 {
     border-top: 1px solid gray;
     border-left: 1px solid gray;
     border-right: 1px solid gray;
     border-bottom: 1px solid gray;
 }

 QTabBar::tab
 {
     background-color: rgb(166, 166, 166);
     min-width: 70px;

     padding-top : 6px;
     padding-bottom : 8px;
     color: rgb(255, 255, 255);
     font: 10pt "Arial";
 }

 QTabBar::tab:selected, QTabBar::tab:hover 
{
     background-color: rgb(127, 127, 127);
 }

 QTabBar::tab:selected 
{
     /*border-color: #9B9B9B;*/
 }

 QTabBar::tab:!selected
 {
     margin-top: 2px; /* make non-selected tabs look smaller */

 }

This results in something like this

enter image description here

I wanted to know how I can fix the bottom of my 'g's as they seem to be cut off ?


Solution

  • you should add more room by adjusting the values within this part:

    QTabBar::tab
    {
        background-color: rgb(166, 166, 166);
        min-width: 70px;
    
        padding-top : 6px;
        padding-bottom : 8px;
        color: rgb(255, 255, 255);
        font: 10pt "Arial";
    }
    

    for example adding a minimum height that accommodates enough room for your text, also there is a problem with padding here just remove the lines padding-top: 6px and padding-bottom: 8px:

    QTabBar::tab
    {
        background-color: rgb(166, 166, 166);
        min-width: 70px;
    
        color: rgb(255, 255, 255);
        font: 10pt "Arial";
    }
    

    here is the result of my compilation. I didn't have enough reputation points to post an Image.