rstaib / jquery-bootgrid

Nice, sleek and intuitive. A grid control especially designed for bootstrap.
http://www.jquery-bootgrid.com
MIT License
972 stars 364 forks source link

How to show all text in a cell #372

Open juanwilde opened 6 years ago

juanwilde commented 6 years ago

I got a large text in one column and I want to show all. But it only show a few letters and ...

screen shot 2017-09-28 at 23 52 10

I was looking the docs but without success...

Thanks in advance

bellwood commented 6 years ago

The ellipsis show when the column data is wider than the column.

You can either make the column wider using a header css style in the TH for that column:

data-header-css-class="col-review"

and then create that class in your styles:

.col-review {
width: 100px;
}

OR if you don't want to resize the column, but just make the data visible on say hover, create a column formatter.

In the TH:

data-formatter="review"

In your object definition:

"review": function(column, row) {
return '<span title="'+row.review+'">'+row.review+'</span>';
},

...and on hover, you'll see all the text.

juanwilde commented 6 years ago

Thanks! It is a solution. But what I did was to create a CSS file with this

table tbody tr td {
    white-space: normal !important;
    height: auto !important;
}

Because I needed to keep database breaklines with the nl2br PHP function.

This can be closed

bellwood commented 6 years ago

@JuanWilde you can close the issue by clicking "close"