0

我有一些嵌套的递归函数，它们动态地创建可折叠的列表视图，这些列表视图位于侧面板中。我发现默认的 17em 太小了，尤其是当嵌套文本开始变短时。所以我在css中找到了设置它的样式，我覆盖了那些使用25em。在某些设备上进行测试后，这可能有点太多了。不过我离题了。

我在这里要问的是为什么当我使用 data-display="overlay" 时我的可折叠面板溢出面板，当我将它设置为“显示”时它看起来很好。我认为这可能是我所有的嵌套内容，所以我在这里摆弄了静态内容：http: //jsfiddle.net/LF6UR/

            <div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-position-fixed="true" data-swipe-close="true" data-dismissible="true">

我可以看到并非如此，也许面板还有一些我不知道的其他 CSS 属性。似乎有很多琐碎的小设置需要了解这个框架。希望有人可以提供帮助，因为我真的认为“覆盖”比推送我的主要内容区域更好。

4

2 回答 2

2

jQM 为可折叠集中的可折叠元素添加了一个负的左右边距。您可以像这样覆盖边距：

.ui-collapsible-set .ui-collapsible{
    margin-left: 0;
    margin-right: 0;
}

更新了 FIDDLE

此外，将可折叠集更改为 data-inset="true" 可以解决此问题。

于 2014-03-19T13:53:22.690 回答
0

一个没有将可折叠项设置为插入的解决方案......这很重要，因为我有嵌套的可折叠项是简单地设置 JQM 放入的“魔术” .ui-panel-inner 类作为“增强”，但这使得它有点困难传统的 web 开发人员知道如何将样式应用于他们的控件。

.ui-panel-inner {
    /*width: 25em;*/
    padding: .2em 1.2em;
}

http://jsfiddle.net/magister/LF6UR/8/

于 2014-03-20T14:42:49.103 回答