Search code examples
javascriptjqueryslickgrid

slickgrid auto word-wrap and adjust the height of rows

Slickgrid doesn't support word-wrap as default.

OK, so I made this css and make word-wrap.

.slick-cell, .slick-headerrow-column { 
    position: absolute; 
    border: 1px solid transparent; 
    border-right: 1px dotted silver; 
    border-bottom-color: silver; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    vertical-align: middle; 
    z-index: 1; 
    padding: 1px 2px 2px 1px; 
    margin: 0; 
    white-space: normal;
    overflow-wrap: break-word;
    cursor: default; 
}

It enables word-wrap, but the row height doesn't change.

I want to double the height of wordwrap-ed rows.

How can I detect when the wordwrap-ed by browser??

and How can I double the height of slickgrid row??

Solution

  • The fixed row height is fundamental to SlickGrid, and very hard to change.

    The easiest way around it is to have a pop-up details view, there are some in the examples.

    There have been some investigations into it, and a plugin: see here

    Also see this stackoverflow question for the work that inspired the above plugin: Can SlickGrid's row height be dynamically altered?