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

Why is the min column width arbitrarily hard coded to 100px? #891

Closed
praveenpuglia opened this issue Sep 29, 2017 · 8 comments · Fixed by #895
Closed

Why is the min column width arbitrarily hard coded to 100px? #891

praveenpuglia opened this issue Sep 29, 2017 · 8 comments · Fixed by #895
Labels
Milestone

Comments

@praveenpuglia
Copy link

I am trying to build a table where I want a column to be fixed at 60px. So I looked at the API and saw that I can pass the width as a number. Didn't work.

Then I saw I could pass an object {min: NUMBER, max: NUMBER} for the column configuration and I hoped that would do it for me. No! It was always at least 100px.

I went here - https://github.com/Teradata/covalent/blob/develop/src/platform/core/data-table/data-table.component.ts#L972-L975 and I realized that any column declaring width less than 100 px is being set to 100px. Which is weird.

Right now, I can't possibly set the width of any column narrower than 100px :(

@praveenpuglia praveenpuglia changed the title Why is the min column width arbitrarily hard coded to 100? Why is the min column width arbitrarily hard coded to 100px? Sep 29, 2017
@kyleledbetter
Copy link
Contributor

100 is the default, try setting width to something smaller than 100. To be clear, set width specially not min or max

@praveenpuglia
Copy link
Author

I tried that but even then I get a minimum of 100px.

@kyleledbetter
Copy link
Contributor

Can you post a stackblitz or plunker?

@dubemarcantoine
Copy link

I noticed the same issue when I put in smaller values than 100px.
When investigating, I found another issue, but I don't know if it is related, so I will comment it here:
The width: {min: 300, max: 500} object when defining my columns, the max-width is applied as the min-width on the element.

Here is the element style from Google Chrome.
screen shot 2017-09-29 at 12 45 57 pm

I will try and continue on how to fix this if. It seems that the issue first came from this PR. https://github.com/Teradata/covalent/pull/859. Before this, columns would expand by width and height naturally depending on the content in the grid.

@praveenpuglia
Copy link
Author

@dubemarcantoine is there a plunker template?

@dubemarcantoine
Copy link

I did not do one yet, I'll do it later today/tomorrow after school!

@praveenpuglia
Copy link
Author

I am sorry. I wanted to tag @kyleledbetter :) Is there a plunker template i can use?

emoralesb05 added a commit that referenced this issue Oct 1, 2017
also add posibility to override projected min width via configuration

closes #891
@emoralesb05
Copy link
Contributor

emoralesb05 commented Oct 1, 2017

The min/max is indented to work that way, because table cells are really stubborn when trying to set the widths.. we calculate the needed width and set it to both min/max to ensure it works properly.

The 100px one was so we could have a min width, but i do agree 100px seems really random and you should be able to override it. A fix for this will be addressed #895

Btw, the plnkr URL is in the issue template.

@emoralesb05 emoralesb05 added the bug label Oct 1, 2017
@emoralesb05 emoralesb05 added this to the Beta 8 milestone Oct 2, 2017
emoralesb05 added a commit that referenced this issue Oct 2, 2017
…th (#895)

* fix(data-table): replace hardcoded 100px min width with projected width

also add posibility to override projected min width via configuration

closes #891

* fix(): add min width to checkbox columns

* chore(): make it more explicit with a skipProjection flag
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants