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. Setting CSS width and height for QComboBox::drop-down and QComboBox::down-arrow

Setting CSS width and height for QComboBox::drop-down and QComboBox::down-arrow

Scheduled Pinned Locked Moved Solved General and Desktop
6 Posts 3 Posters 12.4k Views
  • 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.
  • the_T Offline
    the_T Offline
    the_
    wrote on last edited by the_
    #1

    Hi all,

    I am trying to set the CSS for the dropdown and down-arrow but it seems to be ignored:
    The QComboBox I am addressing has a QLineEdit and a QCompleter, so some users complain that the down-arrow is too small for them to hit it with fingers on the touch screen.

    This is how it looks before applying the css
    alt text

    and after

    #1206::down-arrow { width: 70px; height: 70px; }
    #1206::drop-down { width: 70px; height: 70px; }
    

    I get this

    alt text

    The style changes to somewhat ugly but the size is not set.
    What is the proper way to set the width/height for it?
    --EDIT
    To add: the Style is set to Fusion with

    QApplication a(argc, argv);
    //...
    a.setStyle(QStyleFactory::create("Fusion"));
    

    in the main.cpp

    Thanks in advance

    r

    -- No support in PM --

    1 Reply Last reply
    0
    • gfxxG Offline
      gfxxG Offline
      gfxx
      wrote on last edited by
      #2

      why you not use stylesheet?

      QComboBox[urgent = false] {color: black; border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px; border-bottom-left-radius: 7px;background: white;width: 15px;height: 54px;}
      QComboBox[urgent = true] {color: black; border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px; border-bottom-left-radius: 7px;background:#19ff4f;width: 15px;height: 54px;}
      QComboBox:drop-down {font-weight: bold;color: #5E749C; border: 3px solid #5E749C;border-radius: 4px;background: rgb(242, 242, 242, 150); background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FFFFFD, stop: 0.3 #96ADB2);width: 44px;  max-height: 44px;}
      QComboBox:down-arrow {image: url(/home/st/Qt/B/C/res/downarrow.png); width: 24px; height: 24px;}
      

      arrow size is related to QCombobox size ... but stylesheet can help you to break these link.

      regards
      Giorgio

      bkt

      the_T 1 Reply Last reply
      0
      • gfxxG gfxx

        why you not use stylesheet?

        QComboBox[urgent = false] {color: black; border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px; border-bottom-left-radius: 7px;background: white;width: 15px;height: 54px;}
        QComboBox[urgent = true] {color: black; border: 3px solid #5E749C;text-align: top;padding: 4px;border-radius: 7px; border-bottom-left-radius: 7px;background:#19ff4f;width: 15px;height: 54px;}
        QComboBox:drop-down {font-weight: bold;color: #5E749C; border: 3px solid #5E749C;border-radius: 4px;background: rgb(242, 242, 242, 150); background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FFFFFD, stop: 0.3 #96ADB2);width: 44px;  max-height: 44px;}
        QComboBox:down-arrow {image: url(/home/st/Qt/B/C/res/downarrow.png); width: 24px; height: 24px;}
        

        arrow size is related to QCombobox size ... but stylesheet can help you to break these link.

        regards
        Giorgio

        the_T Offline
        the_T Offline
        the_
        wrote on last edited by
        #3

        @gfxx

        Thats exactly what I tried, I was able to change a lot of things but not the width of the down-arrow

        -- No support in PM --

        J.HilkJ gfxxG 2 Replies Last reply
        0
        • the_T the_

          @gfxx

          Thats exactly what I tried, I was able to change a lot of things but not the width of the down-arrow

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #4

          @the_ hi, this should work:

          QComboBox {
              border: 1px solid gray;
          }
          
          QComboBox::drop-down {
              width: 200px;
          }
          

          for whatever reason, you need to give the QComboBox a border or it won't accept the width for the drop-down....


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          the_T 1 Reply Last reply
          3
          • the_T the_

            @gfxx

            Thats exactly what I tried, I was able to change a lot of things but not the width of the down-arrow

            gfxxG Offline
            gfxxG Offline
            gfxx
            wrote on last edited by
            #5

            @the_ if you try my code you can see the difference from yours ....
            @J.Hilk you are in right ... I think it's because qt uses padding and border as selectors to switch from WM to custom .... is the same situation on all widget ...

            regards
            Giorgio

            bkt

            1 Reply Last reply
            0
            • J.HilkJ J.Hilk

              @the_ hi, this should work:

              QComboBox {
                  border: 1px solid gray;
              }
              
              QComboBox::drop-down {
                  width: 200px;
              }
              

              for whatever reason, you need to give the QComboBox a border or it won't accept the width for the drop-down....

              the_T Offline
              the_T Offline
              the_
              wrote on last edited by
              #6

              @J.Hilk

              The border does the trick, thanks

              -- No support in PM --

              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