Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data table rows can not have custom height after beta.7 #868

Closed
quanterion opened this issue Sep 12, 2017 · 5 comments
Closed

Data table rows can not have custom height after beta.7 #868

quanterion opened this issue Sep 12, 2017 · 5 comments
Milestone

Comments

@quanterion
Copy link
Contributor

quanterion commented Sep 12, 2017

Before beta.7 Data-Table row can be of any height. For example, if I set ng-template for a row

<ng-template tdDataTableTemplate="name" >
  <div [style.height.px]="200"></div>
</ng-template>

When all data table rows will have 200px height.

It is not he case after this PR #859. It is no longer possible because height of td-data-table-cell-content-wrapper have been explicitly set to 48px in this file https://github.com/Teradata/covalent/blob/530d8a14db3a7abf67cf63548208d0f5ce485d30/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss

How to allow custom height of data table rows now if I don't need virtual scroll?

@clarkebishop
Copy link

I recently ran into this issue. I've got a custom data table, but in some cases the content overflows one line. The fixed height causes the content to be compressed in an ugly way.

Please switch this to a min-height, or provide a good way to override the values set in ~@covalent/core/theming/all-theme.

@memetolsen
Copy link

@clarkebishop Do you mean something like this?

before

I've managed to "fix" this by overriding the css and applying text-overflow: ellipsis

after

Although this fixes the ugly compression, I would like the row height to be dynamically determined so the whole text becomes visible, like in the older versions.

My suggestion would be to introduce a boolean property on td-data-table so one can choose to apply fixed height or not.

@clarkebishop
Copy link

For my use case, I'm displaying a file name, and have some long names. I like your ellipsis trick, but it won't work for me.

The boolean or some other method seems like the right answer.

@Kumfert
Copy link

Kumfert commented Sep 30, 2017

My table rows have thumbnail images. 48px height restriction is really getting in the way. What's the impetus to impose such a height restriction and take away a valuable feature such as resizing? It's certainly a regression for my application, and conceptually for any application which uses elements other than text in tables.

screen shot 2017-09-30 at 10 38 26 am

@emoralesb05
Copy link
Contributor

emoralesb05 commented Oct 1, 2017

There is a PR opened to address this this #898, but it still requires lots of testing since the reason we forced 48px was that the material spec says a row should have 48px (not more not less).. which also helped simplify the virtual scroll implementation because it can get complicated with dynamic row heights since you need to know the total height before hand..

Since the community seems to want to use data tables for most use cases (i would argue that sometimes a list is a better representation) we wanted to keep everyone happy and try and resolve this issue as efficient as possible.. hopefully we can polish it as we keep going.

@emoralesb05 emoralesb05 added this to the Beta 8 milestone Oct 4, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants