CODEWITHSUNDEEP
javascripthtmlcssdojodgrid
Manachi
Manachi

Reputation: 1064

dgrid white-space css property ignored in cells

I'm implementing a dgrid in my dojo application, and for some reason the grid seems to ignore the white-space:nowrap; property assignment when applied to .dgrid-cell class. My goal is to make the cell widths of the dgrid never reduce to lower than the content within the cell headings. But actual behaviour is, if there are too many cells in the row to fit in their entirity, they all get reduced in width equally.

I've tried the following declaration, with varying specificity and !important etc:

th.dgrid-cell {
    white-space:nowrap;
}

I even tried to apply it to all cells as follows:

.dgrid-cell {
    white-space:nowrap;
}

But the property just seems to be ignored. Any suggestions on how I can achieve this please?

Upvotes: 0

Views: 261

Answers (1)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

white-space: nowrap should work just fine.

However, it's not feasible to get dgrid to automatically determine column widths based on cell contents due to the way it is designed (as well as generally any other dynamic data grid component including dojox grid and gridx, if I'm not mistaken).

dgrid renders each row in its own table, which makes features like virtual scrolling (i.e. OnDemandGrid) possible and also avoids the heavy rendering overhead normally incurred by large tables with many rows and columns which need to compute widths based on all of its content. As a result, however, it's not possible to have dgrid's columns automatically sized based on content.

If you're primarily concerned with ensuring widths based on header contents, hopefully that's reasonable enough to implement based on their expected contents. You can also use text-overflow: ellipsis (as I've done in the fiddle I linked above) to more gracefully indicate overflow when it does happen.

Upvotes: 2

Related Questions