Forums

D3mon

I've created this iOS style notifier...

http://jsfiddle.net/jwtcS/8/

but would welcome any suggestions to allow it to accomodate numbers with more digits, either by making the text size smaller, or (perhaps easier) proportionally resizing the circle to fit?

Senff

So what should it do when there's a huge number in it, like 5 digits? Should it still be a large circle, or should it be an ellipse?

D3mon

A larger circle I think (or smaller text). TBH, though, I'm expecting a reasonable maximum of 999 for this particular project.

Senff

Personally, I would choose this option: http://jsfiddle.net/jwtcS/10/

Indeed it would be a bit tricky to have the height of the circle/bubble be the same as the width; I think the problem would be to detect the actual width of the bubble, being a pseudo/sub element and all.

D3mon

Yes. Thanks very much. That looks to be a 'visually tidy' solution. :D

D3mon

Ah perfect, that's just the way iOS handles it too :D

treehouse : what would you like to learn today?

Forums

[Solved] Proportionally expanding to fit text content?