4. How to make tabs expanding???

Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to make tabs expanding???


  • hey everybody,

    How can I make the tabs expanding?. I was able to set size of the tabs with the following
    @
    tabWidget->setStyleSheet("QTabBar::tab{height:40px; width:108px; color:red;font: 9pt}");
    @
    but there is a small gap between the left end of the screen and the first tab, how ever the third tab touches the right end. I jus want all the three tabs to be fully expanded to the screen size.
    If i increase the width to more than 108px, the tab width with increases and two scroll buttons appear at both ends. No i dont want that.

    The second problem is that i cant align the tabs to the centre. If I get the solution for the first problem, I would not be needing to align the tabs to the center since it will be expanded to the screen size.
    Though i found a solution like this, it does not work :(

    @
    QTabWidget::tab-bar { alignment: center; }
    @

    I tried to set it like this in my code
    @

    tabWidget->setStyleSheet("QTabWidget::tab-bar{alignment:center; }");
    @

    alfah

    0

  • Maybe you are resetting your style sheet instead of adding new style.

    @
    tabWidget->setStyleSheet("QTabWidget::tab-bar{alignment:center; }\n"
    "QTabBar::tab{height:40px; width:108px; color:red;font: 9pt}\n"
    );
    @

    0

  • Hi alfah,

    for your first question try this :

    @ QTabWidget::tab-bar {
    left: 0px; /* move to the right by 0px */
    }@

    As I understand if this is fixed the second problem dissappears?

    0

  • eddy,

    no the problem is not solved with that,
    infact,

    @
    tabWidget->setStyleSheet("QTabBar::tab{height:40px; width:108px; color:red;font: 9pt}");
    tabWidget->setStyleSheet("QTabWidget::tab-bar{left:0px; }");
    @
    i tried like this, my first stylesheet setting disappeared!! no color red or size specificcation.

    yea solving this would dissolve the second problem :)

    alfah

    0

  • michal,

    I tried your solution, the setting font and ht and width works, but it does not align to the centre :(

    alfah

    0

  • i tried this too ,
    it does not work

    @
    tabWidget->setSizePolicy(QSizePolicy::Expanding);
    @

    it gives some error that QSizePolicy is private!

    0

  • [quote author="alfah" date="1312960820"]eddy, no the problem is not solved with that, infact, @ tabWidget->setStyleSheet("QTabBar::tab{height:40px; width:108px; color:red;font: 9pt}"); tabWidget->setStyleSheet("QTabWidget::tab-bar{left:0px; }"); @ i tried like this, my first stylesheet setting disappeared!! no color red or size specificcation. yea solving this would dissolve the second problem :) alfah[/quote]

    i tried it out with my code and it works on my example.

    I tried your code in Qt Designer RIGHT MOUSE BUTTON click > change style sheet. You get immediately a statusbar which tells you if the stylesheet is ok or not. I suggest you to test them always there. That's what I did and it gave me the following good result :

    @QTabBar::tab{height:40px; width:108px; color:red;font: 9pt;}
    QTabWidget::tab-bar{left:0px; }@

    0

  • i jus found out something!!!!

    both, yours and michal's code works in the simulator but not on the device!!!!! :(
    now wat do i do??? :( :(

    alfah

    0

  • What device are you using? what target do you use on Qt Creator?

    0

  • Im using a C7, and wat do you mean by target on Qt Creator? :(

    0

  • So it's Symbian^3. That's what you use in the project settings in Qt Creator or choosing as template when starting your project.

    Could you make a new Symbian^3 based project use a QWidget instead of a QMainWindow and apply a QTabWidget on it with your stylesheet? I want to diagnose when this occurs and maybe QMainWindow has to follow some styling rules.

    0

  • i jus simply pasted the same code in another a new proj, new form of QWidget and i got the proj running with no errors but no tabs seen!!

    I cant set the following

    @
    centralWidget()->setLayout(mainLayout);
    @

    I faced with the same prob last time and the above code did it, but now since it is QWidget. .:(

    0

  • you cannot use centralWidget in a QWidget. just use setlayout in the constructor.

    0

  • eddy,
    got the tabs displayed, but the same trouble. It works on the simulator but not on the device!! :(
    The gap is still there :(

    0

  • [quote author="alfah" date="1312970956"]eddy, got the tabs displayed, but the same trouble. It works on the simulator but not on the device!! :( The gap is still there :([/quote]

    Do you have any stylesheet changed on the device or is it like you didn't use a stylesheet at all?

    0

  • stylesheet changed on the device meaning??
    I havnt made any settings change.

    Simply created three tabs using following code
    @

    {
    ui->setupUi(this);
    QTabWidget *tabWidget = new QTabWidget;
    tabWidget->setStyleSheet("QTabWidget::tab-bar{left:0px; }\n"
    "QTabBar::tab{height:40px; width:105px; color:red;font: 9pt}\n");

    QWidget *pCalender = new QWidget;
QWidget *pHistory = new QWidget;
QWidget *pStatistics= new QWidget;

pCalender->setStyleSheet("background-color: rgb(224, 220, 201);");
pHistory->setStyleSheet("background-color: rgb(224, 220, 201);");
pStatistics->setStyleSheet("background-color: rgb(224, 220, 201);");
tabWidget->addTab(pCalender,tr("Calender"));
tabWidget->addTab(pHistory,tr("History"));
tabWidget->addTab(pStatistics,tr("Statistics"));
mainLayout = new QVBoxLayout;
mainLayout->addWidget(tabWidget);
setLayout(mainLayout);

    @

    Only the above stylesheet has been used

    alfah

    0

  • does this line
    @pCalender->setStyleSheet("background-color: rgb(224, 220, 201);"); @
    effectively do something on your device or is it the same as you didn't use it all?

    0

  • yes yeaa,

    Its totally needed. It is to set the background of the calender layout, otherwise the whole background turns black.

    0

  • can you show me a printscreen of your widget?

    i want to know if your color is set on the application on your device.

    0

  • i found out somethin else too,

    In the simulator, if you use Maemo Fremantle, tabs are aligned center or pushed to the left. But if nokia symbian^3 simulator is used, the same problem occurs, the tabs are placed a bit off from the screen's left end.

    P.S printscreen of the simulator??

    alfah

    0

  • the symbian^3 of course that's the one for your c7. The Maemo Fremantle is for another device.

    But now we are a step forward. We know for symbian^3 simulator AND the device it is not working as expected.
    I will test with the symbian^3 simulator myself. Maybe this is not possible due to style restrictions on Symbian^3.

    0

  • I think the reason why we cannot set the first tab aligned to the left is because there is space reserved for the arrow.

    You will have to experiment with the stylesheet settings untill you find something pleasing.

    At least we know we shouldn't make a bug report as I suspected earlier.

    0

  • :)

    I too came up with the same conclusion:). cuz when i increase the size of tabs, it kinda fits the whole things along with the arrow.
    sometimes I feel Qt and symbian is not flexible :(

    Im still fiddling with the tabs and tabbar though :)

    0

  • i found something like this in the docs

    expanding : bool
    This property holds when expanding is true QTabBar will expand the tabs to use the empty space.
    By default the value is true.
    This property was introduced in Qt 4.5.

    Access functions:
    @
    bool expanding () const
    void setExpanding ( bool enabled )
    @

    could you tell me how to use it??? Its said its set to true by default. jus giving it a try

    alfah

    0

  • have a look at "this thread.":http://developer.qt.nokia.com/forums/viewthread/2879
    They didn't succeed however.

    the setexpanding function is protected so you will have to subclass.

    0

  • ahh k. another vain try.

    so inshort i cant solve it jus like that. So can i tag this as "Unsolvable" ??? :D

    0

  • I didn't say it's unsolvable. I just said we will have to try with subclassing QTabBar.

    0

  • I found a solution on "Stackoverflow":http://stackoverflow.com/questions/5133846/qt4-expanding-tabs-in-qtabbar.

    Obviously the -expanding- setExpanding function divides the available space like this :!http://dl.dropbox.com/u/33544011/tabbarExpanding.PNG(Tabbar expanding)!
    There is always space left over on the right for another tab. Could you use that?

    If not you will have to live with the styles provided by your device.

    0

  • is there a function called expanding??

    I had made a quick search in Stackoverflow last day and found something like this of which i could not make head or tail of it

    http://stackoverflow.com/questions/2145983/qt-making-ui-that-shrinks-and-expands

    alfah

    0

  • no I meant setExpanding sorry. I edited my post.

    But you didn't anwer my question :
    There is always space left over on the right for another tab. Could you use that?

    for the setTabIcon question see your "other post":http://developer.qt.nokia.com/forums/viewthread/8399/P30/#50381. please don't double post.

    0

  • well,

    technically, set expanding should expand the tabs right, so wont it cover up the space on the right????

    alfah

    P.S i have removed the double post

    0

  • bq. technically, set expanding should expand the tabs right, so wont it cover up the space on the right????

    Yes, we could expect that, but the Trolls decided to do it otherwise. I can imagine people like it like that to give a hint to the user he can add tabs using the program...

    You could make a suggestion on the "bugtracker":https://bugreports.qt.nokia.com.

    0
Log in to reply