Row Overlaps In Cgridview

Hi folks

I am using CGridView it’s working fine but I have a small prob.

The rows overlap (see screen below), I start using Ecolumns Extension to manage the columns.

But sometime I need to display all the columns and it’s not convenient at all (specially on mobile devices)

Does anybody have any idea on how to manage that, in order to make all the rows fit inside the Grid even if all the columns are displayed, please ?

thank you

You can for example add overflow-x:scroll css for the container holding the data to get horizontal scroll bar.

Thank you for your help,

but I’d like to avoid the horizontal scroll bar it’s not recommended at all especially on mobile devices

this is why Im looking for a solution to make them fit the grid size without using a scroll bar

I’m afraid there is no easy answer to this. At some point any given screen size will be too small. You can try to set columns width for each one of them but results may vary. In case like this I stick to columns that are absolutely necessary to identify the row and add the “see the details” button.

ok thank you for your help

The CSS that will fix the problem for the detail view:




table.detail-view {

    table-layout: fixed;

}


table.detail-view td {

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;        

}