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

[Bug Report][3.4.7] VDataTable headers prop maxWidth doesn't work. #18862

Closed
mwshub opened this issue Dec 13, 2023 · 7 comments · Fixed by Enterprise-CMCS/cmcs-eregulations#1307 · May be fixed by Shuunen/ging#200
Closed

[Bug Report][3.4.7] VDataTable headers prop maxWidth doesn't work. #18862

mwshub opened this issue Dec 13, 2023 · 7 comments · Fixed by Enterprise-CMCS/cmcs-eregulations#1307 · May be fixed by Shuunen/ging#200

Comments

@mwshub
Copy link

mwshub commented Dec 13, 2023

Environment

Vuetify Version: 3.4.7
Vue Version: 3.3.11
Browsers: Firefox 120.0
OS: Windows 10

Steps to reproduce

Create a table and set the maximum width of column to 200px.

Expected Behavior

The maximum width of column is 200px.

Actual Behavior

The column is not limited by maxWidth.

Reproduction Link

https://play.vuetifyjs.com/#...

@plundermun
Copy link

Having the same problem

vuetify@3.2.1
vue@3.3.4

@websitevirtuoso
Copy link
Contributor

websitevirtuoso commented Dec 20, 2023

I can do PR and fix it
image

But before doing it. I would like to know does maxWidth will help?
Even when I used maxWidth it doesn't affect
image

When I apply width and maxWidth to header column and columns it works as expected. Let mw know which option best works. I think this one is good and I can do PR

@plundermun
Copy link

Thank you for the fast reply.
You are right setting max-width just on the th will not do anything.
It will also have to set the max-width on the corresponding td.
There may also be some overflow:hidden or text-overflow: eliplsis necessary.

@websitevirtuoso
Copy link
Contributor

Yes I think overflow will do the job. I will do PR

@plundermun
Copy link

plundermun commented Dec 21, 2023

You are talking setting overflow and max-width on the TH or also on the TDs for that column, because setting it only on the TH doesn't work if content of some TD is to long.
Thank you in advance.

@websitevirtuoso
Copy link
Contributor

Created PR. it was pretty clear and simple to implement. but only now I found time to check it. I hope one day they will accept it., Because this is already 4 PR in review

@Ribeiro-Tiago
Copy link

Just ran into this exact issue (v.3.5.8). Any ETA on this fix ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment