1

I am trying to have a jQuery knob widget within a bootstrap panel to be resized automatically when panel itself gets resized (thanks to jQuery UI resizable).

HTML:

<div class="col-md-3">
    <div class="panel panel-info dashboard_panel">
        <div class="panel-heading">HELLO 2</div>
            <div class="panel-body">
                <input type="text" class="dial" id="knob1" data-min="-50" data-width="100%" data-height="50%" data-max="50"></input>
                <button class="button button-default">Just a button</button>
            </div>
        </div>
    </div>
</div>

JS:

$(".dashboard_panel").resizable();
$(".dial").knob();

CSS:

.dashboard_panel {
    min-height: 200px;
}

Here is the link to the code: jsFiddle

I am expecting initial height of the knob widget to be 100 pixels height (50% of 200 pixels minimum height of the parent element), which is not the case. Then I am expecting the height to always be 50% of the size, but it doesn't work neither.

Can someone help me, please ? :)

cvrebert
  • 9,075
  • 2
  • 38
  • 49
mguijarr
  • 7,641
  • 6
  • 45
  • 72
  • Are you sure your jsFiddle is the correct one? I don't see any knobs. – Stefan Aug 11 '14 at 12:38
  • I just updated the link; sorry. Now it should be ok. – mguijarr Aug 11 '14 at 12:40
  • Correct me if I am wrong but I still can't see knobs :(. your knob() function is giving 'undefined is not a function' – Stefan Aug 11 '14 at 12:44
  • Can't understand why... In 'external ressources' I added the link to the minified code for the jquery knob plugin: https://raw.githubusercontent.com/aterrien/jQuery-Knob/master/dist/jquery.knob.min.js , so the function should not be undefined it is working for me. I don't understand. – mguijarr Aug 11 '14 at 12:46
  • I was in Chrome on Mac, it does work in Firefox though – Stefan Aug 11 '14 at 12:49

1 Answers1

1

Try adding height:100% to your .panel-body class:

jsFiddle

.panel-body {
    height:100%;
}

Also, if you have min-height to your .dashboard-panel class the knob doesn't scale on load, not sure why. If you really don't need all dashboard panels to have the same height I'd consider removing it.

*Edit: adding the same amount of min-height to the .panel-body class seems to have fixed it. I've updated the fiddle.

Stefan
  • 1,096
  • 8
  • 10
  • for some reason it can still get ugly when scaling it up, as the knob widget can get bigger than the container panel. I will try to investigate on this one... – mguijarr Aug 11 '14 at 14:37
  • Hmm.. not sure what you mean. This is what I'm getting when I increase the size: http://imgur.com/IE29GdY – Stefan Aug 11 '14 at 14:40
  • oh yes, sorry I forgot to mention I set data-height for the knob widget to 100% (to occupy all panel space), then it gets weird on resizing – mguijarr Aug 11 '14 at 14:46
  • It comes from the fixed height of the .dashboard_panel when draggable does its magic on it. You can reset the height once you are done dragging, not sure if it that helps you. http://jsfiddle.net/8jLkjzsc/15/ – Stefan Aug 11 '14 at 15:33