Issue with knob slider in Ionic Meteor

[akhatri]

I have loaded this plugin on my Meteor Ionic project through the normal instructions. The plugin registers the knob but the input area is showing off screen for some reason. It appears the CSS styling for margin-left is pushing it off the screen. I have attached 2 screenshots and if I remove the margin it shows on the screen. My JS code for initializing the knob dial is

Template.knob.rendered = function () {
    // initialise the knob slider
    $(".deposit-dial").knob({
        stopper: false,
        min: -50,
        max: 50,
        format: function (value) {
         return '$' + value;
        }
    });
};

Is there a way to override the generated CSS somehow. Bit puzzled as to why its adding a margin-left to the input though

[jhedev]

Having a similar problem... Did you find any solution @akhatri ?

[dunksmith]

Not sure if it helps, but I added a callback to override styles.

In jquery.knob.js, add:

this.o = $.extend({
    ...
    style: function(el, d) {}     // <- new

and

this.init = function () {
    ...
    this.o.style(this.i, this);    // <- new
};

Then in your app:

element.knob({
    'style': function(el, d) {
        el.css({
            'top': 'inherit',
            'left': 0,
            'right': 0,
            'margin-left': 'auto',
            'margin-right': 'auto',
            'margin-top' : -(d.w / 1.5) + 'px',
        });
    }
});