August 10, 2011

alfah alfah
Lab Rat
157 posts

how to make tabs expanding???

Page  
1

hey everybody,

How can I make the tabs expanding?. I was able to set size of the tabs with the following

  1. 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 :(

  1. QTabWidget::tab-bar { alignment: center; }

I tried to set it like this in my code

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

alfah

31 replies

August 10, 2011

michal.k michal.k
Lab Rat
70 posts

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

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

August 10, 2011

Eddy Eddy
Area 51 Engineer
1609 posts

Hi alfah,

for your first question try this :

  1.  QTabWidget::tab-bar {
  2.      left: 0px; /* move to the right by 0px */
  3.  }

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

 Signature 

Moderator
Qt Certified Specialist
Nokia Qt Ambassador

August 10, 2011

alfah alfah
Lab Rat
157 posts

eddy,

no the problem is not solved with that,
infact,

  1.    tabWidget->setStyleSheet("QTabBar::tab{height:40px; width:108px; color:red;font: 9pt}");
  2.    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

August 10, 2011

alfah alfah
Lab Rat
157 posts

michal,

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

alfah

August 10, 2011

alfah alfah
Lab Rat
157 posts

i tried this too ,
it does not work

  1. tabWidget->setSizePolicy(QSizePolicy::Expanding);

it gives some error that QSizePolicy is private!

August 10, 2011

Eddy Eddy
Area 51 Engineer
1609 posts
alfah wrote:
eddy, no the problem is not solved with that, infact,
  1.  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

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 :

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

 Signature 

Moderator
Qt Certified Specialist
Nokia Qt Ambassador

August 10, 2011

alfah alfah
Lab Rat
157 posts

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

August 10, 2011

Eddy Eddy
Area 51 Engineer
1609 posts

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

 Signature 

Moderator
Qt Certified Specialist
Nokia Qt Ambassador

August 10, 2011

alfah alfah
Lab Rat
157 posts

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

August 10, 2011

Eddy Eddy
Area 51 Engineer
1609 posts

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.

 Signature 

Moderator
Qt Certified Specialist
Nokia Qt Ambassador

August 10, 2011

alfah alfah
Lab Rat
157 posts

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

  1. centralWidget()->setLayout(mainLayout);

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

August 10, 2011

Eddy Eddy
Area 51 Engineer
1609 posts

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

 Signature 

Moderator
Qt Certified Specialist
Nokia Qt Ambassador

August 10, 2011

alfah alfah
Lab Rat
157 posts

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

August 10, 2011

Eddy Eddy
Area 51 Engineer
1609 posts
alfah wrote:
eddy, got the tabs displayed, but the same trouble. It works on the simulator but not on the device!! :( The gap is still there :(

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

 Signature 

Moderator
Qt Certified Specialist
Nokia Qt Ambassador

August 10, 2011

alfah alfah
Lab Rat
157 posts

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

Simply created three tabs using following code

  1. {
  2.     ui->setupUi(this);
  3.     QTabWidget *tabWidget = new QTabWidget;
  4.     tabWidget->setStyleSheet("QTabWidget::tab-bar{left:0px; }\n"
  5.                              "QTabBar::tab{height:40px; width:105px; color:red;font: 9pt}\n");
  6.  
  7.  
  8.     QWidget *pCalender = new QWidget;
  9.     QWidget *pHistory = new QWidget;
  10.     QWidget *pStatistics= new QWidget;
  11.  
  12.     pCalender->setStyleSheet("background-color: rgb(224, 220, 201);");
  13.     pHistory->setStyleSheet("background-color: rgb(224, 220, 201);");
  14.     pStatistics->setStyleSheet("background-color: rgb(224, 220, 201);");
  15.     tabWidget->addTab(pCalender,tr("Calender"));
  16.     tabWidget->addTab(pHistory,tr("History"));
  17.     tabWidget->addTab(pStatistics,tr("Statistics"));
  18.     mainLayout = new QVBoxLayout;
  19.     mainLayout->addWidget(tabWidget);
  20.     setLayout(mainLayout);

Only the above stylesheet has been used

alfah

Page  
1

  ‹‹ qml with TouchArea      [Solved]OpenGL clarification. ››

You must log in to post a reply. Not a member yet? Register here!