Ugly tabs on OS X

[Xanx]

Hello! I'm trying to use QTabWidget on OS X and tabs are really ugly.

This is how Qt tabs look on OS X Sierra:

This is how native tabs look like:

What should I do to make Qt's tabs look line native?

[SGaist]

Hi,

Which version of Qt are you using ?

[Xanx]

Qt is 5.7.1. I downloaded it about two weeks ago from the official site.

[SGaist]

Can you share a sample code where you setup your widgets ?

[ambershark]

@Xanx Did you perchance set a stylesheet on the tabs? I find if I customize the tabs in some ways it completely "breaks" them so they look horrible on OSX.

Are they standard tab's or something custom? Also did you set a stylesheet on any widget they may have inherited?

[Xanx]

@SGaist

Hello! Thank you for your response. I'm sorry for not answering for too long.

Here is the code example:

MainWindow.h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTabWidget>


namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

    QTabWidget *tabs;
};

#endif // MAINWINDOW_H

MainWindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPlainTextEdit>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    tabs = new QTabWidget(this);
    setCentralWidget(tabs);

    tabs->setDocumentMode(true);

    for (auto i = 0; i < 3; ++i) {
        auto editor = new QPlainTextEdit();
        tabs->addTab(editor, "Editor");
    }
}

MainWindow::~MainWindow()
{
    delete ui;
}

Any other file (main.cpp, form itself) is left untouched.

@ambershark No, I do not use any styles here. The example I provide allows to reproduce the following image:

[SGaist]

The looks come from your call to setDocumentMode.

[Xanx]

This post is deleted!

[Xanx]

@SGaist
If I remove this call, tabs look like this:

which is still not what I need

[ambershark]

@Xanx So I looked into it a bit, setDocumentMode(true) is the closest you are going to get in the current Qt to that style of tab.

If you want them to look exactly like the ones in terminal or safari you will need to change your stylesheets to match for the tabs.

And if you don't know css well enough to make it look right you can always write a custom QTabWidget that draws them how you want to see them.

The Qt docs do say that setDocumentMode is the same as setting document mode in OSX, so it should be the same but it isn't. It may just be something like setting margins and styles for the tab widget. I tend to use custom style sheeted tabs in my osx apps, so I haven't run into document mode issues yet.

[Xanx]

@ambershark Thanks for your reply! In OS X, when one uses documents, the operating system itself draws the tabs that are depicted on the image. So it seems to be an issue with custom styles that Qt uses by default. Maybe I will try to make my own styles (I'm not very good at design at all) or look for another style I can use.

[ambershark]

@Xanx Usually Qt is really good about keeping things native. It's kind of surprising they miss so big on the document style tabs. I mean they are close but not as clean and definitely not native matching. It's possible they are working on fixing that.

In the past with Qt when it didn't do things natively I had to write custom controls. If you aren't good with design at all you'll have issues with that, but I'm sure you can find someone else who has already done it either with a custom widget or in a stylesheet that you can use. :)

Good luck!

[Xanx]

@ambershark Maybe I shall file an issue in a bugtracker about that?

[mrjj]

@Xanx
Hi, yes you can open a Bug report and/or ask the devs on
http://lists.qt-project.org/mailman/listinfo/

[aportale]

Hi, in addition to looking out of place, these tabs have also artifacts under HighDPI: https://bugreports.qt.io/browse/QTBUG-57274 I believe, they should instead be looking like the ones on screenshot #2 of post #1.