Styling value of spinner

[Monti123]

Hi,

I have a spinner:

{
xtype: 'spinnerfield',
id: 'Spinner',
groupButtons: false,
},

It's without a label, and the value field is between +/- signs.

I want to style it, change it's height and background.

Is it possible?

I've tried using inputCls config, doesn't work...

Thanks

[bricemason]

It's certainly possible. I did a test with inputCls as well and attempted to override the height and background.

Just specifying an inputCls of something like my-spinner-input, and using the following css won't work.

.my-spinner-input {
    height: 90px;
    background-color: red;
}

because the selector isn't specific enough. Use the element inspector in Google Chrome to get a better handle on the css hierarchy and adjust the selector.

Try it again and if you still can't get it going, post a more specific example.

Brice

[Monti123]

Hi Brice,

Specifically, what I need is:

1. A top-margin in the value, so it would be pushed down a bit comparing to the +\- buttons.
2. An ability to style the numbers.

See attached image.Spinner.png

I tried margin-top - doesn't have any effect.
padding-top has the same effect as height, it just makes the +\- button have more height but doesn't lower the value itself.

Regarding background, seems like background-color effects all the area between the +\- buttons and not just the value...

Thanks in advance.

[bricemason]

Working from the image you provided, I couldn't see a way to style the individual characters other than subclassing the spinner and re-writing the content. Here's how I did that starting with the new spinner class:

Ext.define('My.ux.MySpinner', {
    extend: 'Ext.field.Spinner',
    xtype: 'myspinner',


    initialize: function() {
        this.callParent(arguments);


        // get the input element
        var inputEl = this.element.down("input");


        // insert a new element after the input
        // this will be used to re-write the value
        Ext.DomHelper.insertAfter(inputEl, {
            tag: 'div',
            cls: 'my-spinner-mask'
        });


        // attach event handler used to update the mask
        this.on('change', this.handleSpin);


        // initialize the value in the mask
        this.updateSpinnerMask();
    },


    updateSpinnerMask: function() {
        // split the spinner to individual characters
        var splitValue = new String(this.getValue()).split("");


        var newContent = "";


        // wrap each character in spans
        for(var i = 0; i < splitValue.length; i++) {
            newContent += "<span>" + splitValue[i] + "</span>";
        }


        // update the spinner mask
        this.element.down('.my-spinner-mask').setHtml(newContent);
    },


    handleSpin: function(spinner, newValue) {
        this.updateSpinnerMask();
    }
});

This code essentially adds a new div element just under the input element and re-writes the value of the spinner with spans wrapping each character. After that, the following styles can be used:

.x-spinner {
    background-color: transparent;


    input {
        display: none;
    }


    .my-spinner-mask {
        position: relative;
        text-align: center;
        top: 50px;
        width: 100%;
        height: 44px;


        span {
            background-color: #333;
            color: #fff;
            margin-right: 2px;
            padding: 5px;
        }
    }
}

to produce this result:

screen-shot.png

I hope this helps.

Brice

[Monti123]

Thanks a lot!

[Monti123]

One last thing I noticed, when implementing your great answer:

The + \ - buttons aren't round, they're elliptic (more height than width), not like in your example...

I added

.x-spinner-button
{
width: 30px;
height: 30px;
}

in order to fix that.

And another thing, Sencha couldn't find the event "change", so I used "spin" instead.


Thanks again!