Why does my token input break on mobile?

Question

You can see my token input here on the search box: http://pineapple.io/

Under normal circumstances, there is a hidden input that expands when you click in the box.

It seems to work great in all desktop browsers, but on a mobile phone when you click in the right area of the box (which normally works on a desktop), it doesnt click inside the tiny invisible input. You need to actually click to the farthest most point (directly to the right of the magnifying glass) and then it will work.

Here is where it must be clicked:

I assume this has to do with the 'touch' rather than click functionality of a phone?

Source is here: http://loopj.com/jquery-tokeninput/

Answer 1

Your input is really small (currently it's hard-coded at width: 30px ), hence why the mobile doesn't like it. Can you make that bigger? That would probably help a lot!

Here's a picture to explain: http://cl.ly/image/0b3N471F1y3O