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

Text in QTabBar on MacOS is truncated (or elided by default) although there is empty space...



  • Hi,
    I've noticed that on MacOS the default behaviour of QTabWidget is different than on Linux and Windows.
    First it is not scrollable by default so I had to add setUsesScrollButtons(true);.
    The tabs are centred also instead of being on the left.
    But my main problem is that the text is not taking the whole size of the tab and is thus elided by default and truncated if we use setElideMode(Qt::TextElideMode::ElideNone);
    Here is a snapshot of my app ngPost on MacOS:
    alt text

    and on Linux:
    alt text

    The code is here in MainWindow.cpp of ngPost

        QTabBar *tabBar = _ui->postTabWidget->tabBar();
        tabBar->setContextMenuPolicy(Qt::CustomContextMenu);
        tabBar->setElideMode(Qt::TextElideMode::ElideNone);
    
        _ui->postTabWidget->clear();
        _ui->postTabWidget->setUsesScrollButtons(true);
        _ui->postTabWidget->setStyleSheet("QTabBar { font-size: 14pt; font-family: Times; }");
        _ui->postTabWidget->setTabShape(QTabWidget::TabShape::Rounded);
        _ui->postTabWidget->addTab(_quickJobTab, QIcon(":/icons/quick.png"), _ngPost->quickJobName());
        _ui->postTabWidget->setTabToolTip(0, tr("Default %1").arg(_ngPost->quickJobName()));
        _ui->postTabWidget->addTab(_autoPostTab, QIcon(":/icons/auto.png"), _ngPost->folderMonitoringName());
        _ui->postTabWidget->setTabToolTip(1, _ngPost->folderMonitoringName());
        _ui->postTabWidget->addTab(new QWidget(_ui->postTabWidget), QIcon(":/icons/plus.png"), tr("New"));
        _ui->postTabWidget->setTabToolTip(2, tr("Create a new %1").arg(_ngPost->quickJobName()));
        tabBar->setTabToolTip(2, QString("Create a new %1").arg(_ngPost->quickJobName()));
    

    Any idea how I could get the text displayed properly?
    And also how to force the alignment of the tabs on the left instead of centred?

    PS: I've seen this thread that kind of seems to be the same issue but I couldn't find my answer there...


  • Lifetime Qt Champion

    Hi,

    Likely not the answer you are looking for but you are currently trying to fight the native style of macOS.

    The rendered widget is different for a reason, it follows macOS guidelines. By trying to force a different style just because it does not look the same as Linux and Windows, you are going to make your application look awkward and not integrated in macOS.



  • @SGaist
    Hi,
    well I don't want to fight with macOS native style but there is clearly an issue as the text on the Tabs is elided if I don't do anything... They even totally disappear if there are too many tabs. This is problematic!

    Here is how it looks like if I comment the setElideMode, the setIconSize and setStyleSheet
    so basically if I let the native behaviour.

        QTabBar *tabBar = _ui->postTabWidget->tabBar();
        tabBar->setContextMenuPolicy(Qt::CustomContextMenu);
    //    tabBar->setElideMode(Qt::TextElideMode::ElideNone);
    //    tabBar->setIconSize({20,20});
    
        _ui->postTabWidget->clear();
        _ui->postTabWidget->setUsesScrollButtons(true);
    //    _ui->postTabWidget->setStyleSheet("QTabBar { font-size: 14pt; font-family: Times; }");
        _ui->postTabWidget->setTabShape(QTabWidget::TabShape::Rounded);
        _ui->postTabWidget->addTab(_quickJobTab, QIcon(":/icons/quick.png"), _ngPost->quickJobName());
        tabBar->setTabToolTip(0, tr("Default %1").arg(_ngPost->quickJobName()));
        _ui->postTabWidget->addTab(_autoPostTab, QIcon(":/icons/auto.png"), _ngPost->folderMonitoringName());
        tabBar->setTabToolTip(1, _ngPost->folderMonitoringName());
        _ui->postTabWidget->addTab(new QWidget(_ui->postTabWidget), QIcon(":/icons/plus.png"), tr("New"));
        tabBar->setTabToolTip(2, QString("Create a new %1").arg(_ngPost->quickJobName()));
    

    alt text

    and with many Tabs:
    alt text

    If I just put back only the tabBar->setElideMode(Qt::TextElideMode::ElideNone);
    alt text

    It's nearly ok but a part of the text is missing although there should be space for it...
    Any idea why or what I could do? I've tried to set the padding to 0px in the stylesheet but it doesn't do nothing...

    If I remove the Icons, the text is displayed properly. cf the 2 first ones
    alt text

        _ui->postTabWidget->addTab(_quickJobTab, /*QIcon(":/icons/quick.png"),*/ _ngPost->quickJobName());
        tabBar->setTabToolTip(0, tr("Default %1").arg(_ngPost->quickJobName()));
        _ui->postTabWidget->addTab(_autoPostTab, /*QIcon(":/icons/auto.png"), */_ngPost->folderMonitoringName());
        tabBar->setTabToolTip(1, _ngPost->folderMonitoringName());
    

    So I suspect there is an issue with the text of the tabs when we use an Icon on MacOS.
    How could I try to solve this issue?



  • Well using the stylesheet given in Qt examples, the issue is gone on MacOS.
    There might be an issue with the default one... don't know, I won't investigate more.


  • Lifetime Qt Champion

    What if you use the QTabBar as is ? Meaning without changing the tab shape or anything.



  • @SGaist I've the text truncated (or elided to ... if too many Tabs). (only if I use an icon)


  • Lifetime Qt Champion

    Can you provide a minimal compilable example ?



  • @SGaist I don't manage to reproduce it on a simple case...
    something must be wrong on my app... not sure what...


  • Lifetime Qt Champion

    In that case, the simple thing to do is to comment out all the custom stuff and add it progressively until it starts acting up.



  • @SGaist well without any custom stuff on my app the display has an issue...
    I doubt it could come from the ui...
    might be because of the multi-language support when I use QTab::setTabText on LanguageChange event...?
    I'll try to investigate a bit more when I've some time.
    Have a good weekend ;)


Log in to reply