CSS issue using slickgrid with Liferay

Question

I'm trying to use slickgrid in my liferay 6.1 portal but something strange happens.

When I do

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

The width of the grid expands to 3906.916748046875.

I debugged my code and found that when this line is executed:

$topPanelScroller.hide();

The grid expands its width.

Outside Liferay Portal it is working ok.

Did it happened to anyone else? What can be causing this?

Thanks

score 1 · Accepted Answer · edited Aug 06 '12 at 09:14

Just found the issue.

In layout.css from liferay theme, there is:

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

and it needs to be changed to:

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

may be useful to someone with the same problem ...

CSS issue using slickgrid with Liferay

1 Answers1