How to prevent overflow in responsive design?

I’m scratching my head about how to solve the “digits exceed the display” issue in my calculator. I could imagine an easy way:

  1. I specify the calculator’s dimensions, in pixels
  2. I specify the display font size, in pixels
  3. I figure out, accounting for my font, how many monospace characters will fit in the display and use .length to take action when it hits the limit (I’m trying to emulate a very basic, old-school pocket calculator, so I’d prefer to show “E” or the like instead of switching to scientific notation)

But I have a bit of a problem with the very first step, there. I was planning to make it responsive. I think it would be a real worst-case scenario if someone had to scroll to use it on a phone, and I’d prefer not to have it appear tiny on some gigantic resolution. Plus I worry–what if my font doesn’t come through? What if some different browser’s rendering throws off my visual estimation of the number of digits that fit?

I was hoping for some “magic” way, since there’s CSS text-overflow, to alert if it’s being activated, but looks like there isn’t. I’ve seen some promising solutions involving comparing clientWidth, scrollWidth, offsetWidth, or the like, but guess what, most of those aren’t implemented yet (or is it anymore?) on most browsers.

Bottom line: Am I being too hung up on responsive design and should I go ahead and hard-code it? Or is there a way to have my cake and eat it too?

px in CSS != pixels on the screen

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

so, depends on what you mean by responsive. Seems to me a calculator that fills up a desktop monitor would look too big anyway, so may as well just size for mobile, but that is up to you. For what its worth, I did my calculator in the easy way you describe, I suspect most others did too.

But what you are talking about is possible, but convoluted. Something like making a second text element with a color of transparent (display: none won’t work), and a function that runs on the browser resize event that fills that text element up, checking its width every step until its width is too big for the screen size (minus padding etc), then saves your maximum digit value from there. Note that this element doesn’t need to be in the right place, it is only a method of getting the width of arbitrary lengths of text.

Suppose monospace could be hardcoded down to a ratio of font-size to width, as well, but that could break if the user didn’t have the font/the font ever got updated/you changed the font/a device has slightly different letter spacing, etc.

1 Like

For responsiveness (in horizontal direction) Bootstrap is a good option. To make sure full height is used, you can use height: 100% and most likely you will want to have a min-height as well.

It is up to you if you want it fully responsive or not. Most people don’t make their calculator responsive. And it took me almost 10 hours to make mine responsive.

I wouldn’t bother too much about fonts, if you chose a standard one, I guess you are fine.

@AbdiViklas I posted a very similar question when I started the JavaScript Calculator.
If you design your main div so it is 320px wide, then it will fit on mobile. Then keep checking the height to make sure it’s not too long. I think that should help you.
Here is my previous question:

Also, to specifically address your question instead of over-all responsive design, maybe:

overflow: hidden;

is what you are looking for?