display:inline on external div misalign the text in Chrome, Safari and Firefox with Twitter Bootstrap

[yannikmesserli]

I have a simple bootstrap template like this:

<div class="row">
        <div class="col-md-2">
                <input type="text" value="0" class="knob" data-min="0" data-max="10000" read-only="true">    
        </div>
       ...
</div>

And the text in the middle end up after the canvas element. The problem seems to be solved by removing the display:inline; style on the external div, line 194 in javascript.

194      // + (this.o.inline ? 'display:inline;' : '')

So I suspect the position-relative style of the parent mess with JQuery-Knob's styles. Maybe a test is necessary before setting this property?

Tested in Chrome 35.0, Firefox 29.0.1, and Safari 7.3 on Mac OSX 10.9.2 and latest stable version of JQuery-knob.

[cannibalita]

That's it, folks. Thanks (:

[charlie-eth]

had same issue, thanks for quickfix

[kapil09karma]

thank you very much for this solution.......

[rivf]

What's the solution? Can't see it. Seems like the post is deleted.

[Kentus]

Without modifying the source: $(".dial").knob({ 'inline': false });

[hutber]

For me I can't see it, I wonder. The style class="knob" where and what are these styles?