Search code examples
liferayslickgridliferay-6

CSS issue using slickgrid with Liferay

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

Solution

  • 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 ...