Clarity: clr-datagrid does't resize column width after we update the model

Created on 7 Jul 2017  路  2Comments  路  Source: vmware/clarity

[ x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

column width should be updated properly after we update the model

Actual behavior

column width is not affected if we update the model and it ends with a broken result.

Reproduction of behavior

Click on "add user" to add a user with a long name
https://plnkr.co/edit/1bW0DD?p=preview

Environment details

  • Angular version: 4.2.5

  • Clarity version: "0.9.11

  • OS and version: windows 10

  • Browser: [all]

wontfix

Most helpful comment

Unfortunately, this is expected behavior. We had complaints that columns were "jumping around" when we resized on every single model change. In particular, each page change is a model change, so users would move from page to page and the columns would change width every time. The UX recommendation is now that column widths are set "smartly" based on the initial models, and that we keep the same width as long as the columns are preserved.

In your case, if you have such disparity between the models present in a single column, I can see 3 solutions:

  1. Force a resize by calling datagrid.resize() after updating the model: https://plnkr.co/edit/w1p7eDuf4Xumqky9H3jE?p=preview
    Note that in this plunker, I had to wrap the resize in a timeout because I had to wait for the datagrid to actually go through change detection before resizing, otherwise the new row would simply not be in the DOM yet.
  2. Truncate the text in these cells with extreme variance with an ellipsis. Just add a class on the corresponding cells and use something like:
.name-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
  1. If you know in advance the typical length of the data in this column, you can try to assign it a width from the beginning. Just put a class on the column header and give it a width in CSS: https://plnkr.co/edit/1e2DJRjNVriMyTZ0YVpa?p=preview
    This works great when the long data is a paragraph of text, because you can give an approximate width and it will wrap if it's too long. But in your case with long unbreakable words, this solution would require perfect knowledge of the data in the column.

I'm closing this as wontfix since it's the expected behavior, but I hope the various solutions I offered (especially the first one) address your use case.

All 2 comments

Unfortunately, this is expected behavior. We had complaints that columns were "jumping around" when we resized on every single model change. In particular, each page change is a model change, so users would move from page to page and the columns would change width every time. The UX recommendation is now that column widths are set "smartly" based on the initial models, and that we keep the same width as long as the columns are preserved.

In your case, if you have such disparity between the models present in a single column, I can see 3 solutions:

  1. Force a resize by calling datagrid.resize() after updating the model: https://plnkr.co/edit/w1p7eDuf4Xumqky9H3jE?p=preview
    Note that in this plunker, I had to wrap the resize in a timeout because I had to wait for the datagrid to actually go through change detection before resizing, otherwise the new row would simply not be in the DOM yet.
  2. Truncate the text in these cells with extreme variance with an ellipsis. Just add a class on the corresponding cells and use something like:
.name-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
  1. If you know in advance the typical length of the data in this column, you can try to assign it a width from the beginning. Just put a class on the column header and give it a width in CSS: https://plnkr.co/edit/1e2DJRjNVriMyTZ0YVpa?p=preview
    This works great when the long data is a paragraph of text, because you can give an approximate width and it will wrap if it's too long. But in your case with long unbreakable words, this solution would require perfect knowledge of the data in the column.

I'm closing this as wontfix since it's the expected behavior, but I hope the various solutions I offered (especially the first one) address your use case.

Hi there 馃憢, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

elesueur picture elesueur  路  3Comments

BugsyFTW picture BugsyFTW  路  3Comments

amellnik picture amellnik  路  3Comments

Thatkookooguy picture Thatkookooguy  路  3Comments

thojo picture thojo  路  3Comments