html - サイズ変更可能なブートストラップパネルでjqueryノブレスポンシブサイズ変更が機能しない

Question

パネル自体のサイズが変更されたときに、ブートストラップ パネル内に jQuery ノブ ウィジェットを自動的にサイズ変更しようとしています (サイズ変更可能な jQuery UI のおかげです)。

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;
}

コードへのリンクは次のとおりです: jsFiddle

ノブ ウィジェットの初期の高さは 100 ピクセルの高さ (親要素の最小高さ 200 ピクセルの 50%) であると予想していますが、そうではありません。次に、高さが常にサイズの 50% になることを期待していますが、どちらも機能しません。

誰か助けてくれませんか？:)