Thomas R Alexander

Manager, Developer, and professional problem solver

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!

4 thoughts on “Text overflow on input boxes in Responsive Web Design

  • Davy V.
    August 15, 2012 at 7:40 pm

    VASDFA!

  • click here
    April 23, 2013 at 8:39 pm

    click here…

    I genuinely appreciate this post. I have been looking all over for this! Thank goodness I discovered it on Bing. You’ve made my day! Thank you once again…

  • online micro jobs
    June 8, 2013 at 10:23 am

    online micro jobs…

    We absolutely love your blog and find nearly all of your post’s to be precisely what I’m looking for. Do you offer guest writers to write content to suit your needs? I wouldn’t mind composing a post or elaborating on many of the subjects you write i…

    • teeohhem
      June 8, 2013 at 10:38 am

      Absolutely. Feel free to contact me on the contact page. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">