Twitter Modal on the phone? No problem!!

October 19th, 2012 by admin Leave a reply »

I have been using Bootstrap sometime now, we love it so much at our company that we have decided to use for our web app.  Recently I used it to format the tables in our app and due the responsive nature of bootstrap it just naturally works, here is a link to their base component so you can see it in action: http://twitter.github.com/bootstrap/base-css.html#tables.  You can hide and show the columns by simply tagging you elements or divs with a class of ‘hidden-phone’  or ‘visible-phone’ respectively.  That was a big win for us due to the responsive nature of  bootstrap, now for my main issue.

In the mobile version of the site I wanted to pop up a bootstrap modal window and allow the user to fill out some fields, here is the link to the modal examples http://twitter.github.com/bootstrap/javascript.html#modals.    This works exactly as expected minus one little gotcha, the body of the modal, if greater than 400px I believe, will go past the bottom of the screen on a phone, particularly the iPhone, thus leaving the user stranded with a screen they can’t close.  In comes the  Modal Responsive Fix which was written by Nifty Lettuce, which I have no affiliation with but I am so thankful for this JQuery plugin cause it really saved my bacon with this.  Here is the link to his fix: http://niftylettuce.github.com/twitter-bootstrap-jquery-plugins/, I will let you look over there for how to get it and set it up with your app.

Advertisement

Leave a Reply