Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Z-order of QTab in a QTabWidget

    General and Desktop
    5
    12
    6903
    Loading More Posts
    • 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.
    • O
      Oexal last edited by

      Hi. I'm trying to change the Z-order of a tabs in a QTabWidget.

      The selected QTab is on top of the other tabs, but from left to right, the tabs goes from under to the top. I Mean, the first tab is under the second tab, that is under the third tab, etc.. We can see this order if we are using a negative margin to get the tabs overlapping each other.

      I need to change this order to get my first tab over the second one and the second one over the third one.. so an order from top to under..

      I tried the css z-index properties without success and i did'nt find any documentation on how to change this z-order. Is somebody having an idea how to change that?

      I also tried to change the creating order of these tabs and also the way they are added to the QTabWidget with a insert (QTabWidget.insertTab()) at position 0 instead of just adding tabs with QTabWidget.addTab().. always the same thing..

      here a picture that explain the problem:

      !http://i.imgur.com/Wo35D.png(Tab order example)!

      1 Reply Last reply Reply Quote 0
      • G
        giesbert last edited by

        I'm not sure if that is possible.
        As the sigle tab items are no widgets, they have no z-order.
        perhaps you can subclass QTabBar and reimplement the painting to achieve that?

        Nokia Certified Qt Specialist.
        Programming Is Like Sex: One mistake and you have to support it for the rest of your life. (Michael Sinz)

        1 Reply Last reply Reply Quote 0
        • O
          Oexal last edited by

          will try that!

          super thank's :D

          1 Reply Last reply Reply Quote 0
          • P
            p-himik last edited by

            I've written a class to add to QTabWidget shadows on each size of a tab. If you want i'll post relevant code.

            1 Reply Last reply Reply Quote 0
            • A
              andre last edited by

              Sounds like an interesting class, I'd love to see it!

              1 Reply Last reply Reply Quote 0
              • G
                giesbert last edited by

                p-himik,

                you could make a wiki codesnippet out of it, couldn't you?

                Nokia Certified Qt Specialist.
                Programming Is Like Sex: One mistake and you have to support it for the rest of your life. (Michael Sinz)

                1 Reply Last reply Reply Quote 0
                • P
                  p-himik last edited by

                  TabWidget.h
                  @
                  class TabWidget : public QTabWidget
                  {
                  Q_OBJECT

                  QWidget* leftShadow_;
                  QWidget* rightShadow_;
                  
                  void showEvent( QShowEvent* event );
                  

                  public:
                  explicit TabWidget( QWidget* parent = 0 );

                  private slots:
                  void tabChanged( int tabNumber );
                  };@

                  TabWidget.cpp
                  @
                  TabWidget::TabWidget( QWidget* parent ) :
                  QTabWidget( parent ),
                  leftShadow_( new QWidget( this ) ),
                  rightShadow_( new QWidget( this ) )
                  {
                  connect( this,
                  SIGNAL( currentChanged( int ) ),
                  SLOT( tabChanged( int ) ) );
                  leftShadow_->setObjectName( "leftshadow" ); // with object name you can easily assign a stylesheet
                  leftShadow_->setFixedWidth( 10 ); // don't remeber why i did this constant. I think it should be in the stylesheet
                  leftShadow_->setFixedHeight( tabBar()->height() );
                  rightShadow_->setObjectName( "rightshad--ow" );
                  rightShadow_->setFixedWidth( 10 );
                  rightShadow_->setFixedHeight( tabBar()->height() );
                  }

                  void TabWidget::tabChanged( int tabNumber )
                  {
                  const QTabBar* tabBar = this->tabBar();
                  const QRect tabRect = tabBar->tabRect( tabNumber );
                  if( tabNumber == 0 )
                  {
                  leftShadow_->hide();
                  }
                  else
                  {
                  QPoint leftPos = tabBar->mapTo( this, tabRect.bottomLeft() );
                  leftShadow_->setFixedHeight( tabRect.height() - 4 ); // this '4' is the difference between heights of selected and unselected tabs
                  leftShadow_->move( leftPos.x() - leftShadow_->width(),
                  leftPos.y() - leftShadow_->height() + 1 );
                  leftShadow_->show();
                  }
                  if( tabNumber == ( count() - 1 ) )
                  {
                  rightShadow_->hide();
                  }
                  else
                  {
                  QPoint rightPos = tabBar->mapTo( this, tabRect.bottomRight() );
                  rightShadow_->setFixedHeight( tabRect.height() - 4 );
                  rightShadow_->move( rightPos.x(),
                  rightPos.y() - rightShadow_->height() + 1 );
                  rightShadow_->show();
                  }
                  }

                  void TabWidget::showEvent ( QShowEvent * event )
                  {
                  Q_UNUSED( event )
                  tabChanged( currentIndex() );
                  }
                  @

                  1 Reply Last reply Reply Quote 0
                  • P
                    p-himik last edited by

                    Gerolf, ok. I'll do it today.
                    And here is the stylesheet:
                    @#leftshadow
                    {
                    background-color: qlineargradient(spread:pad,x1:0.312,y1:0.419545,x2:1,y2:0,stop:0 rgba(0, 0, 0, 0),stop:0.817778 rgba(80, 80, 80, 193),stop:1 rgba(80, 80, 80, 255));
                    }
                    #rightshadow
                    {
                    background-color: qlineargradient(spread:pad,x1:0.680,y1:0.419545,x2:0,y2:0,stop:0 rgba(0, 0, 0, 0),stop:0.817778 rgba(80, 80, 80, 193),stop:1 rgba(80, 80, 80, 255));
                    }@

                    1 Reply Last reply Reply Quote 0
                    • G
                      giesbert last edited by

                      Hi p-himik:

                      a good idea would be to includ esome image to show, how it looks like :-)

                      Nokia Certified Qt Specialist.
                      Programming Is Like Sex: One mistake and you have to support it for the rest of your life. (Michael Sinz)

                      1 Reply Last reply Reply Quote 0
                      • P
                        p-himik last edited by

                        Here
                        !http://db.tt/NQA6ogZW(TabWidget)!
                        The left is a standard QTabWidget promoted to TabWidged and the right is a fancy one.

                        1 Reply Last reply Reply Quote 0
                        • P
                          p-himik last edited by

                          Here is the "snippet":http://developer.qt.nokia.com/wiki/QTabWidget_with_side_shadows in the wiki.

                          1 Reply Last reply Reply Quote 0
                          • S
                            Scylla last edited by

                            Hey, this looks very nice ;-)
                            Thank you for sharing this.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post