Text overflow on input boxes in Responsive Web Design

I came across an issue while developing a responsive website for JSTOR this past week. It appears that if you use a long text string in an input box, Mobile Safari and Blackberry will overflow the text below the input box and beyond to display the full search string. I’m not sure if this is a bug or intentional, but here’s what I did to fix it:

Now you can obviously do this with HTML/CSS by itself, but in my case I added this code conditionally only for mobile viewports/touch screen devices since that’s really where the issue was. If you’re following suit, just wrap the code inside of $(document).ready() with:

. This is just a simple way of *assuming* the users is on a non-desktop environment. There are obviously other ways of detecting it for certain, but I won’t get into that here.

Good luck!