Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
David
65
Spin button style
posted

By default, it appears that the up and down spin buttons in the numeric editor are side-by-side. Is there any way to make them so that are oriented top-and-bottom instead?

  • 23953
    Suggested Answer
    Offline posted

    Hi david_ek,

    In 11.1 release igNumericEdit had vertical spin buttons. In 11.2 we changed that for better user experience, because vertical spin buttons were small and sometimes hard to click with the mouse.

    We didn't have option which relates to swapping between horizontal and vertical spin buttons. The only way to make the spin buttons vertical is with workaround. Here is the CSS rules which do the trick:

     

     

    Code Snippet
    1. <style type="text/css">
    2.     span.ui-igedit.ui-state-default.ui-widget.ui-corner-all.ui-igedit-container {
    3.         height: 21px;
    4.     }
    5.     span.ui-igedit.ui-state-default.ui-widget.ui-corner-all.ui-igedit-container input {
    6.         float: none!important;
    7.     }
    8.     span.ui-igedit.ui-state-default.ui-widget.ui-corner-all.ui-igedit-container span.ui-igedit-button.ui-igedit-buttondefault.ui-state-default.ui-igedit-spinbutton {
    9.         height: 11px!important;
    10.         width: 16px!important;
    11.         clear: both!important;
    12.     }
    13.     span.ui-igedit.ui-state-default.ui-widget.ui-corner-all.ui-igedit-container span.ui-igedit-buttonimage.ui-igedit-spinbuttonimage {
    14.         height: 11px!important;
    15.         width: 16px!important;
    16.         margin-top: -3px!important;
    17.     }    
    18. </style>

     

    Note: This code is tested with both 11.2 and 12.1 release and browsers: IE9, Chrome 19x, Firefox 12, Opera 11.64

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.