jquery 旋钮响应式调整大小在可调整大小的引导面板中不起作用

Question

我正在尝试在引导面板中使用 jQuery 旋钮小部件来自动调整大小 当面板本身被调整大小时（感谢 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;
}

这里是代码链接：jsFiddle

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

有人可以帮帮我吗？ :)

Answer 1

尝试将height:100% 添加到您的.panel-body 类中：

jsFiddle

.panel-body {
    height:100%;
}

此外，如果您的.dashboard-panel 类中有min-height，则旋钮不会在负载时缩放，不知道为什么。如果您真的不需要所有仪表板面板都具有相同的高度，我会考虑将其移除。

*编辑： 将相同数量的 min-height 添加到 .panel-body 类似乎已修复它。我已经更新了小提琴。