Html jquery旋钮'；无法在可调整大小的引导面板中工作

我试图在引导面板中有一个jQuery旋钮小部件来自动调整大小 当面板本身调整大小时（由于jQuery UI可调整大小）

HTML:

CSS:

以下是代码的链接：

我期望旋钮小部件的初始高度为100像素高度（父元素最小高度为200像素的50%），但事实并非如此。那么我期待着 高度始终为尺寸的50%，但也不起作用

---

有人能帮我吗？：）

尝试将

高度：100%

添加到您的

面板主体中


另外，如果您的
仪表板
类有
最小高度
，旋钮在负载时不会缩放，不确定原因。如果你真的不需要所有的仪表板具有相同的高度，我会考虑移除它。

*编辑：向
添加相同数量的
min height
。面板主体
类似乎已将其修复。我已经更新了小提琴。
你确定你的JSFIDLE是正确的吗？我没有看到任何旋钮。我只是更新了链接；很抱歉现在应该可以了。如果我错了，请纠正我，但我仍然看不到旋钮：（.你的旋钮（）函数正在给出“undefined is not a function”无法理解为什么…在“external Resources”中，我添加了jquery旋钮插件的缩小代码的链接：，因此该函数不应该是未定义的，因为它对我有效。我不理解。我在Mac上使用Chrome，但在Firefox中也能工作，尽管出于某种原因，当scal将其放大，因为旋钮小部件可能会比容器面板大。我将尝试对此进行调查…嗯…不确定你的意思。这就是我在增大尺寸时得到的结果：哦，是的，对不起，我忘了提及我将旋钮小部件的数据高度设置为100%（以占用所有面板空间），然后它的大小会变得很奇怪。draggable对.dashboard_面板发挥神奇作用时，它来自于.dashboard_面板的固定高度。拖动完成后，您可以重置高度，但不确定这是否有帮助。
<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>

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

.dashboard_panel {
    min-height: 200px;
}

.panel-body {
    height:100%;
}