文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery旋钮响应调整大小在可调整大小的引导面板中不起作用

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

Stack Overflow用户

提问于 2014-08-11 12:24:15

回答 1查看 2.9K关注 0票数 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>

联署材料：

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

CSS：

.dashboard_panel {
    min-height: 200px;
}

下面是到代码的链接：jsFiddle

我期望旋钮小部件的初始高度为100像素高度(父元素200像素最低高度的50%)，但情况并非如此。然后，我期望高度总是50%的大小，但它不起作用。

有人能帮帮我吗？:)

html

css

jquery-ui

twitter-bootstrap

jquery-knob

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-11 14:03:51

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

jsFiddle

.panel-body {
    height:100%;
}

另外，如果将min-height放到.dashboard-panel类中，那么旋钮在加载时不会缩放，也不确定原因。如果你真的不需要所有仪表板都有相同的高度，我会考虑移除它。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25243246

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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