Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Ugly tabs on OS X
Forum Updated to NodeBB v4.3 + New Features

Ugly tabs on OS X

Scheduled Pinned Locked Moved Solved General and Desktop
15 Posts 5 Posters 3.4k Views 4 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • X Xanx
    15 Jan 2017, 20:39

    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:
    Ugly tabs

    This is how native tabs look like:
    native tabs

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

    A Offline
    A Offline
    ambershark
    wrote on 16 Jan 2017, 05:17 last edited by
    #5

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

    My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

    1 Reply Last reply
    1
    • S SGaist
      15 Jan 2017, 22:25

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

      X Offline
      X Offline
      Xanx
      wrote on 16 Jan 2017, 18:28 last edited by
      #6

      @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:

      ugly tabs

      1 Reply Last reply
      0
      • S Offline
        S Offline
        SGaist
        Lifetime Qt Champion
        wrote on 16 Jan 2017, 22:38 last edited by
        #7

        The looks come from your call to setDocumentMode.

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        X 1 Reply Last reply 17 Jan 2017, 17:29
        1
        • X Offline
          X Offline
          Xanx
          wrote on 17 Jan 2017, 04:39 last edited by
          #8
          This post is deleted!
          1 Reply Last reply
          0
          • S SGaist
            16 Jan 2017, 22:38

            The looks come from your call to setDocumentMode.

            X Offline
            X Offline
            Xanx
            wrote on 17 Jan 2017, 17:29 last edited by Xanx
            #9

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

            which is still not what I need

            A 1 Reply Last reply 17 Jan 2017, 18:56
            0
            • X Xanx
              17 Jan 2017, 17:29

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

              which is still not what I need

              A Offline
              A Offline
              ambershark
              wrote on 17 Jan 2017, 18:56 last edited by
              #10

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

              My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

              X 1 Reply Last reply 17 Jan 2017, 19:22
              2
              • A ambershark
                17 Jan 2017, 18:56

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

                X Offline
                X Offline
                Xanx
                wrote on 17 Jan 2017, 19:22 last edited by
                #11

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

                A 1 Reply Last reply 17 Jan 2017, 21:18
                0
                • X Xanx
                  17 Jan 2017, 19:22

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

                  A Offline
                  A Offline
                  ambershark
                  wrote on 17 Jan 2017, 21:18 last edited by
                  #12

                  @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!

                  My L-GPL'd C++ Logger github.com/ambershark-mike/sharklog

                  X 1 Reply Last reply 18 Jan 2017, 14:21
                  1
                  • A ambershark
                    17 Jan 2017, 21:18

                    @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!

                    X Offline
                    X Offline
                    Xanx
                    wrote on 18 Jan 2017, 14:21 last edited by
                    #13

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

                    M 1 Reply Last reply 18 Jan 2017, 14:26
                    1
                    • X Xanx
                      18 Jan 2017, 14:21

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

                      M Offline
                      M Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on 18 Jan 2017, 14:26 last edited by mrjj
                      #14

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

                      1 Reply Last reply
                      0
                      • A Offline
                        A Offline
                        aportale
                        wrote on 18 Jan 2017, 15:06 last edited by
                        #15

                        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.

                        1 Reply Last reply
                        1

                        14/15

                        18 Jan 2017, 14:26

                        • Login

                        • Login or register to search.
                        14 out of 15
                        • First post
                          14/15
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved