Why do ionic badges items have more padding on the right?

It’s always bothered me that within a list badges are not aligned on the right with icons, buttons, and notes.

There doesn’t appear to be a reason for it, and aesthetically it would make sense to have even borders between the top, bottom, and right side of the badge.

Is there a reason for this?

1 Like

The only reason I could think of is if maybe it is to allow for larger numbers? Could you try posting a screen shot with like “1,000,000” in it and see what happens?

If the padding is still there on the right, maybe try doing some SASS work and see if you can remove it or make it different. I haven’t had a chance to open the project I’ve got that uses them but I will look asap and see what my behavior is like.

I mean I’m pulling this straight from the examples. And it’s right-aligned, so having it closer to the edge would actually help. In the past I’ve manually fixed it with styling but it seems unnecessary.

Oh yeah that is bizarre. I’m now working on my app that uses them, I have a custom font but if I can get a simple and non-breaking css override in I’ll post it here so that you can use it too. It does seem unnecessarily far hahaha.

1 Like

I’d appreciate a fix for this too.