Hello,

The responsiveness feature is awesome on tablet and mobile, I have a request that how I can use it on desktop.

my problem is that I don't want to use "word wrap" and horizontal scrolling on desktop and I have fields with so much text and I want to rows to stay on minimum vertical size

two possible solution came to my mind:

1. using responsiveness feature by default on all screen

2. adding a new "Open" button next to Export for everyone which by selecting a row and clicking on it , it opens a modal like "Edit" button except fields are not editable.

I'm trying to figure out and implement one of these solutions but first I wanted your thought and helps on it.

Thanks

Hi,

The solution worked the only problem is that the column value after we expand has following value

.wpdt-c .wpDataTablesWrapper table.has-columns-hidden tr.row-detail > td ul li span.columnValue {
    position: absolute;
    top: 0;
    left: 123px;
    max-width: 750px;
    min-width: 200px;
    max-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

so it shows the "..." if the text overflows, I tried a bunch of css options with white-space it wraps the text but the max-height it won't expand to show all the texts in that column.

It would be great if you can give me some ideas about it.

Thanks

well I found the solution, the following css works perfectly with "Light" skin but not Aqua skin

.columnValue {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}