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. Style combobox item?
Forum Updated to NodeBB v4.3 + New Features

Style combobox item?

Scheduled Pinned Locked Moved Unsolved General and Desktop
11 Posts 3 Posters 23.9k Views 2 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.
  • Shadowblitz16S Offline
    Shadowblitz16S Offline
    Shadowblitz16
    wrote on last edited by
    #1

    does anybody know why I can't style the combobox item?

    this is the qss file

    QComboBox:item {
    	border-image: url(:/Resources/Images/Panel2_Normal.png);
    	border-top: 4;
    	border-left: 4;
    	border-bottom: 4;
    	border-right: 4;
    	
    	background-color: #C87020;
    	
    	font: url(:/Resources/Fonts/GameJam.ttf);
    	color: #C87020;
    }
    
    
    QComboBox:item:selected {
    	border-image: url(:/Resources/Images/Panel1_Normal.png);
    	border-top: 4;
    	border-left: 4;
    	border-bottom: 4;
    	border-right: 4;
    	
    	background-color: #C87020;
    	
    	font: url(:/Resources/Fonts/GameJam.ttf);
    	color: #C87020;
    }
    
    QComboBox:item::hover {
    	border-image: url(:/Resources/Images/Panel2_Normal.png);
    	border-top: 4;
    	border-left: 4;
    	border-bottom: 4;
    	border-right: 4;
    	
    	background-color: #C87020;
    	
    	font: url(:/Resources/Fonts/GameJam.ttf);
    	color: #C87020;
    }
    
    

    I was using this code for a custom combobox to get rid of the arrow

    #ifndef ALTCOMBOBOX_H
    #define ALTCOMBOBOX_H
    
    #include <QPainter>
    #include <QComboBox>
    
    class AltComboBox : public QComboBox
    {
        Q_OBJECT
        public:
            AltComboBox (QWidget *parent) : QComboBox(parent) {}
            void  paintEvent (QPaintEvent *ev);
    };
    
    #endif // ALTCOMBOBOX_H
    
    
    #include "altcombobox.h"
    
    
    
    ///////////////////////////////////////////////////////////////////////////////////////////////////
    /// This class is a custom QComboBox which does NOT display the down arrow. The down arrow takes
    /// a lot of real estate when you're trying to make them narrow. So much real estate that you can't
    /// see short lines of text such as "CH 1" without the digit cut off. The only thing that this
    /// custom widget does is to override the paint function. The new paint function draws the combo
    /// box (using all style sheet info) without the down arrow.
    ///////////////////////////////////////////////////////////////////////////////////////////////////
    
    void AltComboBox::paintEvent (QPaintEvent *ev)
    {
        QPainter p;
        p.begin (this);
        QStyleOptionComboBox opt;
        opt.initFrom (this);
        style()->drawPrimitive (QStyle::PE_PanelButtonBevel, &opt, &p, this);
        style()->drawPrimitive (QStyle::PE_PanelButtonCommand, &opt, &p, this);
        style()->drawItemText (&p, rect(), Qt::AlignCenter, palette(), isEnabled(), currentText());
        p.end();
    }
    
    

    but then the style for "QComboBox:item:selected" and "QComboBox:item:hover" doesn't work

    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi,

      Where are you setting that style sheet ?

      Why not customise AltComboBox rather than QComboBox ?

      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
      • Shadowblitz16S Offline
        Shadowblitz16S Offline
        Shadowblitz16
        wrote on last edited by Shadowblitz16
        #3

        wait I can do that? I thought that it would just auto inherit from QComboBox?
        I guess I could try it. however that doesn't fix the problem of me being able to stylize the items.

        1 Reply Last reply
        0
        • K Offline
          K Offline
          kenchan
          wrote on last edited by kenchan
          #4

          your styling syntax is wrong

          from the style sheet docs...

          QListView::item:selected {
                border: 1px solid #6a6ea9;
            }
          
            QListView::item:selected:!active {
                background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                            stop: 0 #ABAFE5, stop: 1 #8588B2);
            }
          
            QListView::item:selected:active {
                background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                            stop: 0 #6a6ea9, stop: 1 #888dd9);
            }
          
            QListView::item:hover {
                background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                            stop: 0 #FAFBFE, stop: 1 #DCDEF1);
            }
          

          your css...

          QComboBox:item::hover {
          	border-image: url(:/Resources/Images/Panel2_Normal.png);
          	border-top: 4;
          	border-left: 4;
          	border-bottom: 4;
          	border-right: 4;
          	
          	background-color: #C87020;
          	
          	font: url(:/Resources/Fonts/GameJam.ttf);
          	color: #C87020;
          }
          

          Since a QCombBox uses a QListView for it's list I am guessing that it should work with QComboBox::item:hover etc.
          However I have not tested this myself. I am just pointing out that your syntax is probably incorrect.

          1 Reply Last reply
          1
          • Shadowblitz16S Offline
            Shadowblitz16S Offline
            Shadowblitz16
            wrote on last edited by
            #5

            thankyou kenchan
            I was following the documentation here: http://manpage.me/docs/userdocs/qt4/html/stylesheet-examples.html

            since I couldn't find one on qt 5.
            I will try that.

            1 Reply Last reply
            0
            • K Offline
              K Offline
              kenchan
              wrote on last edited by
              #6

              if you have Qt Creator search the help index for "style sheets" and you should see the references.
              Otherwise you could start here

              BTW please mark your posts as solved if you are happy with the solution so other people on the forum can find them easily :-).

              Good luck

              1 Reply Last reply
              2
              • Shadowblitz16S Offline
                Shadowblitz16S Offline
                Shadowblitz16
                wrote on last edited by
                #7

                Thankyou kenchan I will mark this as solved when I confirm it.

                1 Reply Last reply
                0
                • Shadowblitz16S Offline
                  Shadowblitz16S Offline
                  Shadowblitz16
                  wrote on last edited by Shadowblitz16
                  #8

                  @kenchan this still doesn't work I have both of these in my style sheet

                  QListView {
                  	border-image: url(:/Resources/Images/Box2_Normal.png);
                  	border-top: 4;
                  	border-left: 4;
                  	border-bottom: 4;
                  	border-right: 4;
                  	
                  	background-color: #C87020;
                  	
                  	font: url(:/Resources/Fonts/GameJam.ttf);
                  	color: #212121;
                  }
                  
                  QListView::item, QListView::item:hover {
                  	border-image: url(:/Resources/Images/Panel2_Normal.png);
                  	border-top: 4;
                  	border-left: 4;
                  	border-bottom: 4;
                  	border-right: 4;
                  	
                  	background-color: #C87020;
                  	
                  	font: url(:/Resources/Fonts/GameJam.ttf);
                  	color: #C87020;
                  }
                  
                  
                  QListView::item:selected,  QListView::item:selected:active, QListView::item:selected:!active {
                  	border-image: url(:/Resources/Images/Panel1_Normal.png);
                  	border-top: 4;
                  	border-left: 4;
                  	border-bottom: 4;
                  	border-right: 4;
                  	
                  	background-color: #C87020;
                  	
                  	font: url(:/Resources/Fonts/GameJam.ttf);
                  	color: #212121;
                  }
                  QComboBox {
                          border-image: url(:/Resources/Images/Panel1_Normal.png);
                          border-top: 4;
                          border-left: 4;
                          border-bottom: 4;
                          border-right: 4;
                  
                          background-color: #C87020;
                  
                          font: url(:/Resources/Fonts/GameJam.ttf);
                          color: #212121;
                  }
                  
                  QComboBox::on {
                          border-image: url(:/Resources/Images/Panel1_Push.png);
                          border-top: 4;
                          border-left: 4;
                          border-bottom: 4;
                          border-right: 4;
                  
                          background-color: #C87020;
                  
                          font: url(:/Resources/Fonts/GameJam.ttf);
                          color: #212121;
                  }
                  
                  QComboBox::item {
                  	border-image: url(:/Resources/Images/Panel2_Normal.png);
                  	border-top: 4;
                  	border-left: 4;
                  	border-bottom: 4;
                  	border-right: 4;
                  	
                  	background-color: #C87020;
                  	
                  	font: url(:/Resources/Fonts/GameJam.ttf);
                  	color: #C87020;
                  }
                  
                  
                  QComboBox::item:selected:!active, QComboBox::item:selected:active {
                  	border-image: url(:/Resources/Images/Panel1_Normal.png);
                  	border-top: 4;
                  	border-left: 4;
                  	border-bottom: 4;
                  	border-right: 4;
                  	
                  	background-color: #C87020;
                  	
                  	font: url(:/Resources/Fonts/GameJam.ttf);
                  	color: #C87020;
                  }
                  
                  QComboBox::item::hover {
                  	border-image: url(:/Resources/Images/Panel2_Normal.png);
                  	border-top: 4;
                  	border-left: 4;
                  	border-bottom: 4;
                  	border-right: 4;
                  	
                  	background-color: #C87020;
                  	
                  	font: url(:/Resources/Fonts/GameJam.ttf);
                  	color: #C87020;
                  }
                  

                  the items inside the combobox do not take on the borderimage I assign them.

                  EDIT: ok seems like I have to do..

                  QComboBox QAbstractItemView {
                          border-image: url(:/Resources/Images/Panel2_Normal.png);
                          border-top: 6;
                          border-left: 6;
                          border-right: 6;
                          border-bottom: 6;
                  
                          background-color: #283050;
                  
                          font: url(:/Resources/Fonts/GameJam.ttf);
                          color: #212121;
                  }
                  

                  however I can't get the selected item image to change by doing..

                  QComboBox QAbstractItemView:selected {
                          border-image: url(:/Resources/Images/Panel2_Push.png);
                          border-top: 6;
                          border-left: 6;
                          border-right: 6;
                          border-bottom: 6;
                  
                          background-color: #283050;
                  
                          font: url(:/Resources/Fonts/GameJam.ttf);
                          color: #212121;
                  }
                  

                  also I am having trouble with getting the focus line and color to disappear.

                  1 Reply Last reply
                  0
                  • K Offline
                    K Offline
                    kenchan
                    wrote on last edited by
                    #9

                    @Shadowblitz16
                    I think the ":selected" is wrong for the QAbstractItemView. I found this in the style sheet documentation.
                    Maybe something like this will style the list items for you?

                    The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector:
                      QComboBox QAbstractItemView {
                          border: 2px solid darkgray;
                          selection-background-color: lightgray;
                      }
                    
                    1 Reply Last reply
                    0
                    • Shadowblitz16S Offline
                      Shadowblitz16S Offline
                      Shadowblitz16
                      wrote on last edited by
                      #10

                      Thankyou kenchan does this support border-images?
                      I ask this because I want to change the border image of the selected item in the QAbstractItemView.

                      1 Reply Last reply
                      0
                      • K Offline
                        K Offline
                        kenchan
                        wrote on last edited by
                        #11

                        @Shadowblitz16
                        sorry i have not looked into it in detail. I would assume so since it looks like it supports the box model. why not give it a try and you will have your answer :-).

                        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