Modal - Button bottom border gets cut off if base font is larger than 16px

Foundry
1

Hi there,

When setting the base font larger than 16px, the bottom border of the Open button in the Modal gets cut off when the button size is set to Standard. Is it just me or have anyone else seen the same issue?

Leif

2 Likes
2

Interesting. It doesn’t seem to occur with all font size above 16px. For instance try 20px. Also it affects all buttons it looks like and not just the Modal button.

This seems to be a combination of browser rounding and the fact that all divs in Stacks have overflow set to hidden. It also seems to be because the buttons are set to display as inline-block elements.

There’s a few options I think –

  • One option would be to include a small snippet of javascript to set the overflow property on buttons and their direct Stacks wrappers to overflow: visible. This though would mean a small javascript snippet for each button on the page.

  • Another option would be to add a 1px margin to bottom of all buttons. This would avoid the javascript call, but would be adding a 1px margin which could possibly make things look weird. I doubt it would ever cause a real problem though.

I’ll look at it a bit more and see if I can’t suss something out that is acceptable.

1 Like
3

Quick update: Think I could maybe fool it using a 0.5px margin on the bottom. This doesn’t actually seem to add a margin at all, but does trick the inline-block display property. Will test this a bit and see if it causes any other problems. If not will drop it into the next release.

1 Like
4

Thanks for the update, Adam. I’m sure you will get it fixed.

1 Like