search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
841 stars 167 forks source link

Last table row is taller than other table rows #2971

Closed steverydz closed 4 years ago

steverydz commented 4 years ago

Description

The last row of a table is taller than the other rows. This is most visible when applying a background color to the row.

To Reproduce

Add a background color to the final row of a table to see that it is taller than the other rows. This can also be seen by using the browsers developer tools and hovering over the row in the elements panel.

Expected behavior

The last row of a table should be the same height as the others

Screenshots

Screenshot from 2020-04-07 10-56-52

Desktop (please complete the following information):

anthonydillon commented 4 years ago

It might not be related but recently MAAS-UI did this to resolve an issue with the height of the last row of the table: https://github.com/canonical-web-and-design/maas-ui/pull/936/files.

bartaz commented 4 years ago

Hmm... weird. Seems like cells in last row get some invisible border because of border-collapse: collapse. Oh.. joys of table styling...

bartaz commented 4 years ago

This change seems related: https://github.com/canonical-web-and-design/vanilla-framework/pull/2559

Transparent border that is used instead of padding 'collapses' with background of the last row making it visible in strange way.

Seems like previously used padding was changed to border because of some other issue. Not sure why margin is not used there (but seems there was some FF bug related to that).

@lyubomir-popov @anthonydillon Does any of you happen to remember the context of #2559 #2491?

anthonydillon commented 4 years ago

@bartaz Yeah margin was being multiplied by 100's of px each time the browser resized for some reason. At the time we didn't change the background of the rows but I am unsure why changing the background would bleed into the transparent border?

Could you put together a codepen example to see it issue if you can replicate it? @bartaz

bartaz commented 4 years ago

@anthonydillon

Not sure why it would bleed into last row, looks like a browser bug. But also happens both in Chrome and Firefox, so seems like it's just weird side effect of the spec implementation.

This is codepen showing the issue: https://codepen.io/bartoszopka/pen/qBOXEEO

Anyway, using transparent border instead of margin or padding seems like a hack.

I replaced it with margin, and it seems to work fine: https://codepen.io/bartoszopka/pen/eYpEmNa

I don't see any issues with growing on scroll or margin collapsing. I guess these maybe were fixed in browsers, and also spacing in Vanilla evolved couple of times since we had these issues, so maybe border hack is not needed anymore.