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. Customize QSpinbox
Forum Updated to NodeBB v4.3 + New Features

Customize QSpinbox

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

    hi,

    i want to customize QSpinbox

    Below is the picture I want.

    0_1540536527617_custom.png

    I think other things are possible by using stylesheet

    but i don't know how to get up-down button.

    i want to solve it through using stylesheet or inherit QSpinbox.

    is there some ideas?

    1 Reply Last reply
    1
    • M Offline
      M Offline
      minjunkim
      wrote on last edited by
      #3

      I got the following results.

      0_1540540141937_custom-2.png

      code is

      QSpinBox {
      padding-right: 15px; /* make room for the arrows */
      border-color: rgb(0, 0, 0);
      border-width: 3;
      }

      QSpinBox::up-button {
      subcontrol-origin: border;
      subcontrol-position: center right; /* position at the top right corner /
      width: 16px; /
      16 + 2*1px border-width = 15px padding + 3px parent border */
      border-image: url(:/new/prefix1/icon/up_arrow_disabled.png);
      border-width: 1px;
      }

      QSpinBox::down-button {
      subcontrol-origin: border;
      subcontrol-position: center right ; /* position at bottom right corner */
      width: 16px;
      border-image: url(:/new/prefix1/icon/down_arrow_disabled.png) 1;
      border-width: 1px;
      border-top-width: 1;

       border-right-width:20;	
      

      }

      1 Reply Last reply
      0
      • M Offline
        M Offline
        minjunkim
        wrote on last edited by
        #2

        Re: Customize QSpinbox

        I got the following results.

        0_1540538549824_custom-1.png

        The right part of the down button does not collapse.. why??

        code is

        QSpinBox {
        padding-right: 15px; /* make room for the arrows */
        border-image: url(:/images/frame.png) 4;
        border-width: 3;
        }

        QSpinBox::up-button {
        subcontrol-origin: border;
        subcontrol-position: center right; /* position at the top right corner /
        width: 16px; /
        16 + 2*1px border-width = 15px padding + 3px parent border */
        border-image: url(:/new/prefix1/icon/up_arrow.png) 1;
        border-width: 1px;
        }

        QSpinBox::down-button {
        subcontrol-origin: border;
        subcontrol-position: center right ; /* position at bottom right corner */
        width: 16px;
        border-image: url(:/new/prefix1/icon/down_arrow.png) 1;
        border-width: 1px;
        border-top-width: 1;

         padding: -16 12px 0 24px; // part of issue
        

        }

        1 Reply Last reply
        0
        • M Offline
          M Offline
          minjunkim
          wrote on last edited by
          #3

          I got the following results.

          0_1540540141937_custom-2.png

          code is

          QSpinBox {
          padding-right: 15px; /* make room for the arrows */
          border-color: rgb(0, 0, 0);
          border-width: 3;
          }

          QSpinBox::up-button {
          subcontrol-origin: border;
          subcontrol-position: center right; /* position at the top right corner /
          width: 16px; /
          16 + 2*1px border-width = 15px padding + 3px parent border */
          border-image: url(:/new/prefix1/icon/up_arrow_disabled.png);
          border-width: 1px;
          }

          QSpinBox::down-button {
          subcontrol-origin: border;
          subcontrol-position: center right ; /* position at bottom right corner */
          width: 16px;
          border-image: url(:/new/prefix1/icon/down_arrow_disabled.png) 1;
          border-width: 1px;
          border-top-width: 1;

           border-right-width:20;	
          

          }

          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