Image width shrinks when inside table column with smaller name
I'm creating a new table column plugin, "avatar-group", and ran into a weird CSS issue: If the name of a column is smaller in width than the image width, when the table doesn't have enough horizontal space to fit all the columns, the column will collapse to the width of the column name and so will the image!!! It's easier to explain with the video below.
It's something I've never run into before because the column name for images is usually something like "Image" or "Avatar" both of which are wider than most images.
This is caused by the
max-width-full class on <img>s. Adding a css width like w-6 or even w-full doesn't work. You CAN set the width="xx" attribute on the <img> which will prevents it from collapsing. You can also add the max-width-none class.
I don't think this is a bug per se, and I don't think there's anything to be PR'ed either. Just wanted to share this interesting issue with others.
I banged by head against the screen for a good while trying to figure out why my avatar-group wouldn't show the full width of all the avatars. It was because the total width of all the images was wider than the column name! max-width-none solved it for me.2 Replies
Set an extra attributes on the column with a min-width then it shouldn’t shrink beyond its minimum.
But your solution should be fine too 🙂
So in theory you could set the min-width through extraAttributes, but if you're facing this issue in a normal install of Filament, Filament doesnt include enough min-width's to make this useful.
The best solution if you're using an ImageColumn is to make sure you are using the
width() method. This will hard code the width preventing it from collapsing. (Or just make sure your column name is wider than the image!)
If you're building a plugin like me where the image width can be dynamic, then I think max-width-none is the best solution since you won't know what the min-width will be.
Could be other solutions as well.