CODEWITHSUNDEEP
htmlcssjquery-uitwitter-bootstrapjquery-knob
mguijarr
mguijarr

Reputation: 7920

jquery knob responsive resize doesn't work in resizable bootstrap panel

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 ? :)

Upvotes: 1

Views: 2902

Answers (1)

Stefan
Stefan

Reputation: 1106

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.

Upvotes: 1

Related Questions