Results 1 to 13 of 13

Thread: QTabWidget with no text and icon

  1. #1
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default QTabWidget with no text and icon

    I'm using a QTabWidget where I only want to use icons on the tabs and no text. I'm using some stylesheet to style my tabs. The problem is that the icon doesn't show up centered, instead it's to the left in the tab. I can't figure out how to make it show up centered. In the Designer Editor the icon is centered but not in the real app as you can see in the picture.

    You can see both my stylesheet and a picture of the tabs below.

    Tabs:


    Stylesheet:
    Qt Code:
    1. QTabWidget::pane {
    2. border-top: 0px;
    3. }
    4.  
    5. QTabBar::tab {
    6. border: 1px solid #333;
    7. border-radius: 8px;
    8. color: #333;
    9. padding: 5px 5px 5px 5px;
    10. margin: 0px 2px 0px 2px;
    11. background: #fff;
    12. }
    13.  
    14. QTabBar::tab:selected {
    15. border-color: #000;
    16. background: #f1f1f1;
    17. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Oct 2007
    Location
    India
    Posts
    162
    Thanks
    20
    Thanked 6 Times in 5 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: QTabWidget with no text and icon

    Are you setting the icons on tab using style sheets or code? I assume code as i don't see any code to set icons in the style sheet you posted. Also, i don't see any option to set the tab bar icon using style sheet in Qt documentation, so i am curious.
    I am tinkering around with the same thing but i don't see any option to change the icon position unless you subclass QTabBar and do the drawing yourself.
    Maybe try playing with the "align" stylesheet property.

  3. #3
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: QTabWidget with no text and icon

    Hi and thanks for your help!

    Yes I'm setting the icon with code. The strange thing is that if I delete ALL the stylesheets for the tabs then the icon shows up perfect in center but then I can't get the style of the tabs that I like. I have been trying to play with align and text-align to get it right. This is what I use now and it is still not working:

    Qt Code:
    1. QTabBar::tab {
    2. align: center;
    3. text-align: center;
    4. background: #fff;
    5. border: 1px solid #333;
    6. }
    To copy to clipboard, switch view to plain text mode 

    But if I delete the background and border properties it works perfect, really strange... Any ideas?

  4. #4
    Join Date
    Oct 2007
    Location
    India
    Posts
    162
    Thanks
    20
    Thanked 6 Times in 5 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: QTabWidget with no text and icon

    the background color shouldn't have any effect on it, neither border should have any effect. The problem is that i can't see any style sheet property in Qt documentation for specifying an icon for tabs and aligning them. So, the only solution i can think of is custom drawing so you can specify the position (alignment) of the icon yourself.

    And as you said when you don't specify a style sheet or don't use background and border properties it shows up fine. So, i guess this is just a Qt bug (default behavior?). One more point: don't use the "align" property in your style sheet, i get this error when i use the align property:

    "Unknown property align"

  5. #5
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: QTabWidget with no text and icon

    Hi and thank you!

    Is it hard to do the custom drawing of the tabbars if they are a part of a QTabWidget? Im quite a newbie to Qt and I haven't done anything like this before. Is there maybe any examples to look at?

  6. #6
    Join Date
    Oct 2007
    Location
    India
    Posts
    162
    Thanks
    20
    Thanked 6 Times in 5 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: QTabWidget with no text and icon

    I'll try to post some sample code tomorrow for this

  7. #7
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Talking Re: QTabWidget with no text and icon

    Thats really nice of you, thanks!

  8. #8
    Join Date
    Oct 2007
    Location
    India
    Posts
    162
    Thanks
    20
    Thanked 6 Times in 5 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Red face Re: QTabWidget with no text and icon

    I am just trying to help
    Ok, here's the code:

    First you need to make a custom QTabBar class. A sample code is as follows:

    Header file (.h):
    Qt Code:
    1. #include <QTabBar>
    2. #include <QIcon>
    3. #include <QPainter>
    4.  
    5. class StatusTabBar : public QTabBar
    6. {
    7. Q_OBJECT
    8. public:
    9. StatusTabBar ();
    10. virtual ~StatusTabBar () {}
    11.  
    12. protected:
    13. QSize tabSizeHint (int) const { return QSize(70,27);}
    14. void paintEvent(QPaintEvent *);
    15. };
    To copy to clipboard, switch view to plain text mode 

    So, you need to create a custom tab bar class by deriving from QTabBar and then overwriting the tabSizeHint (use this to specify the size of the tabs) and paintEvent (use this for custom drawing). Here's the code from .cpp file:

    Qt Code:
    1. #include <QTabBar>
    2. #include <QBitmap>
    3. #include <QIcon>
    4. #include <QStylePainter>
    5. #include <QStyleOptionTabV2>
    6.  
    7. #include "statustabbar.h"
    8.  
    9. StatusTabBar::StatusTabBar(): QTabBar()
    10. {
    11. }
    12.  
    13. void StatusTabBar::paintEvent(QPaintEvent *event)
    14. {
    15. QStylePainter painter(this);
    16.  
    17. for(int i = 0; i < 3; ++i)
    18. {
    19. initStyleOption(&option, i);
    20. //printf("tab text: %s\n", option.text.toLatin1().data());
    21. //painter.drawControl(QStyle::CE_TabBarTab, option);
    22. painter.drawItemPixmap(option.rect, 0, QPixmap("selected.png"));
    23. painter.drawItemText(option.rect, 0, palette(), 1, option.text);
    24. }
    25. }
    To copy to clipboard, switch view to plain text mode 

    Here, i have 3 tabs in my application, so i hard-coded the loop to run 3 times, but i it's possible to get this value from Qt. You should read more about QStylePainter and QStyleOptionTabV2 class in the Qt documentation. QStylePainter::drawItemPixmap can be used for adding a pixmap to the tabs. option.rect contains the rectangle for the entire tab, so if you want to draw the icon at a particular location, you can specify the appropriate rect. QStylePainter::drawControl can be used for drawing various parts of the tab. You can read more about it the Qt documentation.

    Also, if you want to see more drawing code and how Qt draws the default tab bar, check out the paintEvent function in qtabbar.cpp in the Qt source code (qt-source/src/gui/widgets/qtabbar.cpp)

    Edit: If you use custom drawing you may not be able to use style sheets. I am not sure it'll work but you can try.

    I hope this helps.
    Last edited by montylee; 11th February 2010 at 18:22.

  9. The following 2 users say thank you to montylee for this useful post:

    martinn (12th February 2010), posixprogrammer (25th April 2011)

  10. #9
    Join Date
    Oct 2007
    Location
    India
    Posts
    162
    Thanks
    20
    Thanked 6 Times in 5 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: QTabWidget with no text and icon

    @Martinn, do share with us if you were able to achieve what you intended (even if it takes some time to do it)

  11. #10
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: QTabWidget with no text and icon

    Hi again!

    I cheated a little as I didn't have the time and added some padding to the left that made the icon show up in the middle. :-)

  12. #11
    Join Date
    Feb 2011
    Posts
    13
    Thanks
    2
    Thanked 1 Time in 1 Post
    Platforms
    MacOS X Unix/X11 Windows Symbian S60

    Default Re: QTabWidget with no text and icon

    Hi Montylee,

    Thank you for help.
    I shall try, and post up my result.

    Best regards.

  13. #12
    Join Date
    Feb 2011
    Posts
    13
    Thanks
    2
    Thanked 1 Time in 1 Post
    Platforms
    MacOS X Unix/X11 Windows Symbian S60

    Default Re: QTabWidget with no text and icon

    Hi Montylee,
    I have done as you said. It is ok.
    Thank you so much.

  14. #13
    Join Date
    Mar 2015
    Posts
    20
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Unix/X11 Symbian S60

    Default Re: QTabWidget with no text and icon

    Tank you montylee - you don't know - but you helped me sooooooooo much with the suggestion of overriding tabSizeHint!!!

Similar Threads

  1. Button icon and text
    By electronicboy in forum Qt Programming
    Replies: 5
    Last Post: 9th October 2009, 23:27
  2. [QTabWidget] horizontal text on left side
    By Boy in forum Qt Programming
    Replies: 6
    Last Post: 16th May 2008, 09:52
  3. Text under the Icon
    By QiT in forum Newbie
    Replies: 3
    Last Post: 1st April 2007, 18:42
  4. Qlabel with (icon and text) HowTo ?
    By QiT in forum Qt Programming
    Replies: 2
    Last Post: 8th August 2006, 09:14
  5. Icon Text Alignment
    By nupul in forum Newbie
    Replies: 3
    Last Post: 1st May 2006, 05:47

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.