在 Liferay 中使用 slickgrid 的 CSS 问题答案

【问题标题】：CSS issue using slickgrid with Liferay在 Liferay 中使用 slickgrid 的 CSS 问题
【发布时间】：2012-08-06 17:14:09
【问题描述】：

我正在尝试在 Liferay 6.1 门户中使用 slickgrid，但发生了一些奇怪的事情。

当我这样做时

self.grid = new Slick.Grid('#list', self.dataView, columns, options);

网格的宽度扩展为3906.916748046875。

我调试了我的代码，发现当这行执行时：

$topPanelScroller.hide();

网格扩大了它的宽度。

在 Liferay 门户之外它工作正常。

它发生在其他人身上吗？这可能是什么原因造成的？

谢谢

【问题讨论】：

标签： liferay slickgrid liferay-6

【解决方案1】：

刚刚发现问题。

在 liferay 主题的layout.css 中，有：

.portlet-layout {
    border-collapse: collapse;
    clear: both;
    display: table;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
}

需要改成：

.portlet-layout {
    border-collapse: collapse;
    clear: both;
    display: table;
    border-spacing: 0;
    table-layout: fixed; // this is changed from auto to fixed
    width: 100%;
}

可能对遇到同样问题的人有用...

【讨论】：