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

[mbruel]

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:

and on Linux:

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...

[SGaist]

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.

[mbruel]

@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()));

and with many Tabs:

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

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

    _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?

[mbruel]

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.

[SGaist]

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

[mbruel]

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

[SGaist]

Can you provide a minimal compilable example ?

[mbruel]

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

[SGaist]

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.

[mbruel]

@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 ;)