问题标签 [jquery-ui-layout]

我们的大部分项目都在使用JQuery UI Layout Plugin 。我们已经启动了一个使用 Bootstrap 作为框架的新项目。我们尝试了一个简单的布局示例，使用 Bootstrap 容器，但布局不会呈现，实际上没有呈现 html。我的感觉是，不知何故，Bootstrap 和 JQuery UI Layout 并没有很好地发挥作用。现在，对于代码：

这就是我们试图为 HTML 做的事情：

这就是我们试图为 Javascript 做的事情：

但是，HTML 根本不呈现（我们看不到“West”或“Center”文本）。但是，如果我将 HTML 更改为不再使用 body-content div 并使用“body”来创建布局，我们就可以了。

工作 HTML：

工作JS：

这是一个不工作的JSFiddle ，这是一个工作的JSFiddle。

在 angular-ui-layout 模块中，要设置我们需要传递一个值的大小，就像<div ui-layout-container size='20%'>是否可以传递一个模型一样，所以当模型值改变时，面板的大小也应该改变。

期待：

或者如何在按钮单击事件上设置窗格的打开和关闭，而不是单击分隔线中的小箭头？

我正在尝试创建一个结构如下的布局：

• 北窗格
• 中心窗格
  • 标题 div
  • 类似笔记本的标签面板
    • 至少有一个标签
  • 页脚 div

页眉 div 和页脚 div 必须始终可见，标签应该占据所有剩余空间，并且如果需要，应该有一个垂直滚动条。

这是我所做的：https ://jsfiddle.net/mguijarr/y57v3nkf/

我overflow:hidden在中心窗格上设置，我试图 height: 100%在选项卡面板上设置它以使其尽可能地增长，但它正在占用下面的空间（即页脚 div 未显示）。

我能做些什么来修复布局？

当我从 triand-jqGrid 4.6.0 迁移到 free-jqGrid 4.8.0 时，形成中断

这是因为我的 jqGrid 位于一个 div 内，position: absolute; z-index: 0;因此当编辑模式呈现在 jqGrid 的 gbox div 内并且覆盖层附加在主体 z-index 规则上时，会将对话框置于覆盖层之下。通过从 jqGrid.src.js 撤消此更改可以轻松纠正此错误（这意味着当我单击编辑按钮时，编辑表单显示在网格内，但在 html 中它附加在正文上）。

但是，当我在 gitHub（即将推出的 jqGrid 4.9.0）中尝试最新代码时，形成对话框的呈现似乎已经改变。因为当我修改 jqGrid.src.js（将 toTop 设置为 true）时，表单编辑对话框会呈现在浏览器的左上角

这是 JSFiddle链接

这position: absolute;是一个约束，因为它是由jQuery UI 布局添加的

是否可以包含特定设置以使 jqGrid 4.9.0 再次与 jQuery ui Layout 兼容？

更新：

预期产出

我在网站中使用 jquery-ui-layout 插件：jQuery UI Layout Hompage

有一些选项允许您将 html 放置在切换器中togglerContent_open。togglerContent_closed我想在我的 EAST 窗格中包含文本，但我的问题是文本在垂直切换器上水平显示，因此只能看到第一个字符。

如何显示它以使其垂直读取？就像以下选项中的任何一个（对不起，非常粗糙的模型）。它是 jQuery UI 布局中的一个选项还是只是 css？

编辑：有谁知道这是否可以通过修改 jQuery UI 布局设置来实现？

我没有为网格指定宽度或高度，而是使用了“ui-grid-auto-resize”。它工作但不正常。上面只有一小块网格，因此我看到了该特定区域的滚动条（由 ui-layout 拆分器定义）。我该怎么做才能摆脱滚动条？

我也不想为网格的高度和宽度定义一个特定的数字。

这是我的html：

我的网格定义：

我有一个窗格，它是使用插件jQuery UI Layout创建的一组窗格的一部分。

这个面板有一个“切换”按钮，它有一定的高度和宽度（我把它变成了一个令人讨厌的值只是为了演示）。

我想知道在布局已经实例化后是否/如何修改该切换按钮的设置或其他任何内容。例如，在 上button.click()，我可能想将它的高度/宽度设置为，0以便用户无法与之交互。

在我的JS Fiddle中，我可以访问布局并在单击处理程序函数中切换窗格“打开”或“关闭”。但是，实例化后我似乎无法更改它的属性。有谁知道如何做到这一点？

小提琴：http: //jsfiddle.net/c92whe17/6/

http://jsfiddle.net/jc3rj681/2/

使用插件jQuery UI Layout，我有几个不同的窗格。当用户将窗口调整为小尺寸时，我想调用一个函数来更改窗格的minsizeandsize以便我可以使用窗口使其变小。

我可以这样做，但要应用更改，我必须切换关闭，然后切换打开窗格。这会产生很多闪烁，最终看起来非常凌乱。我只需要这个窗格以这种方式调整大小。

问题：有没有一种方法可以应用这些布局更改而无需切换窗格两次以应用它们？

看看我制作的这个小提琴：http: //jsfiddle.net/jc3rj681/2/

在这里，在切换窗格之前，不会应用对显示/隐藏按钮的“宽度”所做的更改。如果您可以在不切换的情况下进行此宽度更改，我相信它也会解决我的问题。

我无法弄清楚我的 HTML 有什么问题，因此jquery-ui-layout在浏览器（Chrome/Firefox）中缩小时，库不想重新计算容器的宽度/高度。在我的 HTML 中，所有白色窗格都相互连接，但是当我缩小时，它们会断开连接......

我查看了官方jquery-ui-layout演示，例如这个： http: //layout.jquery-dev.com/demos/example.html 正如您在 Zoom Out 元素（它们的内联style属性）上看到的那样动态地改变它们的值。但在我的代码中 - 它没有发生 - 值保持不变......

以下是在浏览器中“缩小”几次时部分在我的代码中的外观：

http://plnkr.co/edit/DhQyktteFfyd5hrKxJQX?p=preview

（要查看问题，请选择在 plunker的单独窗口中启动预览，然后在浏览器中缩小几次）

如何使 datetimepicker 在 jquery ui 布局中正常工作。当我单击它在南窗格后面的文本字段时，日期时间选择器没有显示。

见小提琴

先感谢您。