Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Change the spacing between the close button and the border



  • How to increase the spacing between the close button and the border of the tab?

    0_1525158862894_4fe59b36-98e2-4880-a671-30bf2d62191c-image.png

    I'm using this example: https://gist.github.com/espdev/4f1565b18497a42d317cdf2531b7ef05

    But the close button is too close to the border of the tab for what I want to do, so I was wondering if it's possible to increase the spacing.



  • @Mr-Gisa
    Dunno, but have you tried QTabBar::tab:right with margin-right or padding-right?



  • @JonB said in Change the spacing between the close button and the border:

    TabBar::tab:right

    It doesn't work, unfortunately



  • Anyone to help me with that?



  • @Mr-Gisa said in Change the spacing between the close button and the border:

    Anyone to help me with that?

    This is apparently caused by the QTabBar::tab:top section of the stylesheet, which is really the only one relevant to your example: apparently, tab:right (and all the other orientations) does nothing because the right in there seems to refer to the tab location (at the top/bottom/left/right of the widget; in Qt Creator these are referred to North/South/West/East in the tabPosition property).

    If you remove the QTabBar::tab:top section altogether you get the original layout:

    0_1525359605357_40f3fdaa-0dfb-4413-ac0f-d71ff358f336-image.png

    The QTabBar::tab:top section as defined in the example css file, gives the small spacing you are unsatisfied with.

    This can be reproduced by the following minimal stylesheet:

        QString style = "\
            QTabBar::tab:top {\
                margin-right: -1px;\
                padding: 5px 10px 5px 10px;\
            }\
            ";
    
        ui->tabWidget->setTabsClosable(true);
        ui->tabWidget->setStyleSheet(style);
    

    The result is:

    0_1525359700900_94319133-0fa7-43d0-bb9b-18dffbf401eb-image.png

    If instead, I use:

        QString style = "\
            QTabBar::tab:top {\
                margin-right: -10px;\
                margin-left: 10px;\
                padding: 5px 20px 5px 20px;\
            }\
            QTabBar::tab:top:first {\
                margin-left: 0px;\
            }\
            ";
    

    The result is like:

    0_1525361585298_5f245bc7-3831-4fe8-b162-548781a2c328-image.png

    So, playing with the settings in QTabBar::tab:top in addition to overriding certain of those settings for QTabBar::tab:top:first and/or QTabBar::tab:top:last (the first and last tabs), you can change the layout somewhat.



  • Thank you very much. ♥


Log in to reply