Cart NumberPad issue on mobile devices

[tech-house]

Cart quantity number pad on mobile phone does not work properly. Tested on iphone 5 and Galaxy 6, using chrome or safari. Number pad shows off-screen, with only "9, 0, . and return" visible. if you zoom in, the number pad, you can use the "+ / -" section of the keypad, but the numbers will not all display. Has anyone else seen this issue?

[georgearnall]

Repeat issue: #130

I get this tested on an iPhone 5S:

Is that what you're referring too ? (If not can you provide a screenshot?)

A quick fix would be to add something along the lines of: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This would prevent the browser zooming in on the input element.

[georgearnall]

Edit: Looks like this is fixed in 0.5-beta, can we close these issues?

After spending a little bit more time looking at this issue, I realise what you mean't:

I will have a look into making the dropdown appear in a fixed position taking up the entire width of the viewport.

[kilbot]

Hi @georgearnall! Thanks for your contributions on this.

I have just checked 0.5-beta and the CSS has been improved* for use on small devices. The numpad will pin itself to the side of the screen rather than overflow off the screen. Version 0.5 will be released very soon.

*Note I say improved, it's still a bit clumsy, especially on a smaller device like the 5S.

[georgearnall]

Yes, that looks better. Ideally it would be nice if the number pad displayed directly below the input element and move the triangle to the left but for now it works and I reckon there are more important things to work on atm.

Still might be worth adding the viewport meta tag in to prevent that awkward zooming?