1

我试图在引导面板中设置一个 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%，但它也不起作用。

有人能帮助我吗 ？:)

4

1 回答 1

1

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

jsFiddle

.panel-body {
    height:100%;
}

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

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

于 2014-08-11T14:03:51.603 回答