Question

我有一些嵌套的递归函数，可以动态创建与侧面板中的列表视图可折叠。我发现默认的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属性。使用此框架似乎有很多难以理解的小设置。希望有人可以提供帮助，因为我认为'叠加'比推动我的主要内容区更好。

Answer 1

jQM向可折叠集内的可折叠项添加负左右边距。你可以像这样覆盖边距：

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

更新了 FIDDLE

此外，将可折叠集更改为data-inset =＆＃34; true＆＃34;解决了这个问题。

Answer 2

没有将可折叠设置为插入的解决方案...这很重要，因为我有嵌套的可折叠，只需设置“魔法”即可。 JQM作为“增强”提供的.ui-panel-inner类。但这使得传统的web开发人员知道将样式应用于他们的控件有点困难。

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

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

具有可折叠集和列表视图的面板设置为em25太宽，覆盖＆＃39;模式

2 个答案: