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. Horizontal text in QTabWidget
Forum Updated to NodeBB v4.3 + New Features

Horizontal text in QTabWidget

Scheduled Pinned Locked Moved Solved General and Desktop
25 Posts 8 Posters 14.7k Views 3 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.
  • mrjjM Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on last edited by
    #9

    Hi
    You have to set
    alt text

    then it works for a plain TabWidget

    alt text

    M S 2 Replies Last reply
    1
    • mrjjM mrjj

      Hi
      You have to set
      alt text

      then it works for a plain TabWidget

      alt text

      M Offline
      M Offline
      MostafaEzzat
      wrote on last edited by
      #10

      @mrjj

      Thanks alot

      mrjjM 1 Reply Last reply
      0
      • M MostafaEzzat

        @mrjj

        Thanks alot

        mrjjM Offline
        mrjjM Offline
        mrjj
        Lifetime Qt Champion
        wrote on last edited by
        #11

        @MostafaEzzat
        Np, that info was actually missing in the org example.

        M 1 Reply Last reply
        0
        • mrjjM mrjj

          @MostafaEzzat
          Np, that info was actually missing in the org example.

          M Offline
          M Offline
          MostafaEzzat
          wrote on last edited by MostafaEzzat
          #12

          @mrjj

          I'm sorry for opening this again but i've bunch of css code and want to use but when i add it from StyleSheet of Qt Designer The tabs became Vertical

          QTabWidget::pane { border: 1px solid lightgray; top:-1px; background: rgb(245, 245, 245);; }
           QTabBar::tab { background: rgb(230, 230, 230); border: 1px solid lightgray; padding: 15px; } 
          QTabBar::tab:selected { background: rgb(245, 245, 245); margin-bottom: -1px; }
          

          aqrt.PNG

          1 Reply Last reply
          0
          • mrjjM mrjj

            Hi
            You have to set
            alt text

            then it works for a plain TabWidget

            alt text

            S Offline
            S Offline
            sandrayin
            wrote on last edited by
            #13

            @mrjj

            Hi,

            i've managed to implement this but the close button does not align with the new style. What do I do?

            bf47f75d-b1b2-49bc-aab2-fe2bde67de6e-image.png

            jsulmJ 1 Reply Last reply
            0
            • S sandrayin

              @mrjj

              Hi,

              i've managed to implement this but the close button does not align with the new style. What do I do?

              bf47f75d-b1b2-49bc-aab2-fe2bde67de6e-image.png

              jsulmJ Offline
              jsulmJ Offline
              jsulm
              Lifetime Qt Champion
              wrote on last edited by
              #14

              @sandrayin said in Horizontal text in QTabWidget:

              What do I do?

              We don't know because you do not show any code...

              https://forum.qt.io/topic/113070/qt-code-of-conduct

              1 Reply Last reply
              0
              • A Offline
                A Offline
                AZEDINE
                wrote on last edited by
                #15

                I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

                en python : class HorizontalTabStyle(QProxyStyle):
                def drawControl(self, element, option, painter, widget=None):
                if element == QProxyStyle.CE_TabBarTab:
                opt_tab = QStyleOptionTab(option)
                # نجعل Qt يرسم النص كما لو كان في الأعلى (North) وبالتالي يكون أفقي
                opt_tab.shape = QTabBar.RoundedNorth
                super(HorizontalTabStyle, self).drawControl(element, opt_tab, painter, widget)
                else:
                super(HorizontalTabStyle, self).drawControl(element, option, painter, widget)
                .....
                self.tabWidgetResult.setTabPosition(QTabWidget.TabPosition.West)

                    # نطبّق الستايل المخصص على الـ tabBar
                    self.custom_style = HorizontalTabStyle(self.tabWidgetResult.style())
                    self.tabWidgetResult.tabBar().setStyle( self.custom_style)
                
                jsulmJ 1 Reply Last reply
                0
                • A AZEDINE

                  I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

                  en python : class HorizontalTabStyle(QProxyStyle):
                  def drawControl(self, element, option, painter, widget=None):
                  if element == QProxyStyle.CE_TabBarTab:
                  opt_tab = QStyleOptionTab(option)
                  # نجعل Qt يرسم النص كما لو كان في الأعلى (North) وبالتالي يكون أفقي
                  opt_tab.shape = QTabBar.RoundedNorth
                  super(HorizontalTabStyle, self).drawControl(element, opt_tab, painter, widget)
                  else:
                  super(HorizontalTabStyle, self).drawControl(element, option, painter, widget)
                  .....
                  self.tabWidgetResult.setTabPosition(QTabWidget.TabPosition.West)

                      # نطبّق الستايل المخصص على الـ tabBar
                      self.custom_style = HorizontalTabStyle(self.tabWidgetResult.style())
                      self.tabWidgetResult.tabBar().setStyle( self.custom_style)
                  
                  jsulmJ Offline
                  jsulmJ Offline
                  jsulm
                  Lifetime Qt Champion
                  wrote on last edited by
                  #16

                  @AZEDINE There is no picture. And please format your code properly.

                  https://forum.qt.io/topic/113070/qt-code-of-conduct

                  A 1 Reply Last reply
                  0
                  • jsulmJ jsulm

                    @AZEDINE There is no picture. And please format your code properly.

                    A Offline
                    A Offline
                    AZEDINE
                    wrote on last edited by AZEDINE
                    #17

                    @jsulm

                    
                    self.tabWidgetResult = self.findChild(QTabWidget, "tabWidgetResult")
                           if self.tabWidgetResult:
                               self.tabWidgetResult.tabBar().setCursor(Qt.CursorShape.PointingHandCursor)
                    
                    
                           self.tabWidgetResult.setStyleSheet("
                               QTabBar::tab {
                                   width: 29px;
                                   max-width: 100px;
                                   min-width: 20px;
                               }
                    
                               QTabBar::tab:selected {
                                   background: #0E94A0;
                                   color: white; 
                               }
                    
                               QTabBar::tab {
                                   color: #000000; 
                               }
                    
                               QTabBar::tab::!selected {
                                   color: #0E94A0; 
                               }
                    
                               QTabBar::tab {
                                   font-size: 14px;
                                   font-weight: bold; 
                                   margin: 5px; 
                                   padding: 5px; 
                                   border: 2px solid #0E94A0;
                                   border-radius: 10px; 
                               }
                    
                               QTabBar::tab > QLabel {
                                   qproperty-alignment: AlignCenter; 
                               transform: translate(0,10px) rotate(-90deg);
                                       
                               }
                    
                               QTabBar::tab:selected > QLabel {
                                   qproperty-alignment: AlignCenter; 
                                   transform: translate(0,10px) rotate(-90deg);
                                   
                               }
                    
                           ")
                           
                    

                    (Capture d'écran 2025-03-17 152926.png link url)) I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

                    jsulmJ A 2 Replies Last reply
                    0
                    • A AZEDINE

                      @jsulm

                      
                      self.tabWidgetResult = self.findChild(QTabWidget, "tabWidgetResult")
                             if self.tabWidgetResult:
                                 self.tabWidgetResult.tabBar().setCursor(Qt.CursorShape.PointingHandCursor)
                      
                      
                             self.tabWidgetResult.setStyleSheet("
                                 QTabBar::tab {
                                     width: 29px;
                                     max-width: 100px;
                                     min-width: 20px;
                                 }
                      
                                 QTabBar::tab:selected {
                                     background: #0E94A0;
                                     color: white; 
                                 }
                      
                                 QTabBar::tab {
                                     color: #000000; 
                                 }
                      
                                 QTabBar::tab::!selected {
                                     color: #0E94A0; 
                                 }
                      
                                 QTabBar::tab {
                                     font-size: 14px;
                                     font-weight: bold; 
                                     margin: 5px; 
                                     padding: 5px; 
                                     border: 2px solid #0E94A0;
                                     border-radius: 10px; 
                                 }
                      
                                 QTabBar::tab > QLabel {
                                     qproperty-alignment: AlignCenter; 
                                 transform: translate(0,10px) rotate(-90deg);
                                         
                                 }
                      
                                 QTabBar::tab:selected > QLabel {
                                     qproperty-alignment: AlignCenter; 
                                     transform: translate(0,10px) rotate(-90deg);
                                     
                                 }
                      
                             ")
                             
                      

                      (Capture d'écran 2025-03-17 152926.png link url)) I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

                      jsulmJ Offline
                      jsulmJ Offline
                      jsulm
                      Lifetime Qt Champion
                      wrote on last edited by
                      #18

                      @AZEDINE said in Horizontal text in QTabWidget:

                      I put the tabs in west orientation

                      According to the picture you don't: the tabs are arranged vertically. How did you set up the QTabWidget?

                      https://forum.qt.io/topic/113070/qt-code-of-conduct

                      1 Reply Last reply
                      0
                      • A AZEDINE

                        @jsulm

                        
                        self.tabWidgetResult = self.findChild(QTabWidget, "tabWidgetResult")
                               if self.tabWidgetResult:
                                   self.tabWidgetResult.tabBar().setCursor(Qt.CursorShape.PointingHandCursor)
                        
                        
                               self.tabWidgetResult.setStyleSheet("
                                   QTabBar::tab {
                                       width: 29px;
                                       max-width: 100px;
                                       min-width: 20px;
                                   }
                        
                                   QTabBar::tab:selected {
                                       background: #0E94A0;
                                       color: white; 
                                   }
                        
                                   QTabBar::tab {
                                       color: #000000; 
                                   }
                        
                                   QTabBar::tab::!selected {
                                       color: #0E94A0; 
                                   }
                        
                                   QTabBar::tab {
                                       font-size: 14px;
                                       font-weight: bold; 
                                       margin: 5px; 
                                       padding: 5px; 
                                       border: 2px solid #0E94A0;
                                       border-radius: 10px; 
                                   }
                        
                                   QTabBar::tab > QLabel {
                                       qproperty-alignment: AlignCenter; 
                                   transform: translate(0,10px) rotate(-90deg);
                                           
                                   }
                        
                                   QTabBar::tab:selected > QLabel {
                                       qproperty-alignment: AlignCenter; 
                                       transform: translate(0,10px) rotate(-90deg);
                                       
                                   }
                        
                               ")
                               
                        

                        (Capture d'écran 2025-03-17 152926.png link url)) I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

                        A Offline
                        A Offline
                        AZEDINE
                        wrote on last edited by
                        #19

                        @AZEDINE I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

                         self.tabWidgetResult.setTabPosition(QTabWidget.West)
                        
                        1 Reply Last reply
                        0
                        • A Offline
                          A Offline
                          AZEDINE
                          wrote on last edited by
                          #20

                          image.png mon besoin comme ca en python

                          jsulmJ 1 Reply Last reply
                          0
                          • A AZEDINE

                            image.png mon besoin comme ca en python

                            jsulmJ Offline
                            jsulmJ Offline
                            jsulm
                            Lifetime Qt Champion
                            wrote on last edited by
                            #21

                            @AZEDINE Did you try what @mrjj suggested in this thread?

                            https://forum.qt.io/topic/113070/qt-code-of-conduct

                            A 1 Reply Last reply
                            0
                            • jsulmJ jsulm

                              @AZEDINE Did you try what @mrjj suggested in this thread?

                              A Offline
                              A Offline
                              AZEDINE
                              wrote on last edited by
                              #22

                              @jsulm moi utilise python est ce que il ya une solition ???

                              jsulmJ 1 Reply Last reply
                              0
                              • A AZEDINE

                                @jsulm moi utilise python est ce que il ya une solition ???

                                jsulmJ Offline
                                jsulmJ Offline
                                jsulm
                                Lifetime Qt Champion
                                wrote on last edited by
                                #23

                                @AZEDINE said in Horizontal text in QTabWidget:

                                moi utilise python est ce que il ya une solition

                                Please use English or post in French sub-forum

                                https://forum.qt.io/topic/113070/qt-code-of-conduct

                                1 Reply Last reply
                                0
                                • A Offline
                                  A Offline
                                  AZEDINE
                                  wrote on last edited by
                                  #24
                                  This post is deleted!
                                  1 Reply Last reply
                                  0
                                  • SGaistS Offline
                                    SGaistS Offline
                                    SGaist
                                    Lifetime Qt Champion
                                    wrote on last edited by
                                    #25

                                    Hi,

                                    Please provide a minimal runnable script that shows your issue.

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

                                    1 Reply Last reply
                                    0

                                    • Login

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