CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Alex Spencer
Alex Spencer

Reputation: 862

How do I make Twitter Bootstrap's modal appear properly on the iPhone?

Here is the link to the site: http://daisy.camorada.com/

When you click on the "article" button it pops up the Twitter Bootstrap with the modal, and on the iPhone it does not display properly, how do I make the modal appear properly on the iPhone?

I'm not sure if this is a JavaScript, Bootstrap, or CSS question.

Thanks in advance for your help,

EDIT: What i mean by "display properly" is the following: I would like the iphone to display the bootstrap modal how it appears on a computer. Here is a screenshot of how the modal looks on a computer's browser: screenshot from google chrome on 13" computer

And here is how it looks on the iphone, I would like the iphone to display it like the example above:

enter image description here

Upvotes: 1

Views: 2283

Answers (1)

giovannif23
giovannif23

Reputation: 21

I had this same issue with Twitter Bootstrap v2.0.4 (bootstrap-modal.js v2.0.4). There are two issues to fix to reach the solution.

Problems

  1. CSS: The modal class (.modal) is set to { top: 50%; }. This makes the modal show offscreen.
  2. JS: If you are scrolled down the page the modal bg might not fill the screen correct. The modal must open at top of the page.

Solution

CSS

@media only screen and (max-width: 479px) {
.modal {
  position: absolute;
  top: 16%; // ADJUSTMENT MADE HERE
  left: 50%;
  z-index: 1050;
  width: 300px;
  margin: -240px 0 0 -150px;
  overflow: auto;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}
}

JS

In the bootstrap.js adjust the modal show: function()

show: function () {
    var that = this
      , e = $.Event('show')

    that.oldWindowPosition = $(window).scrollTop(); // 
    $('body, html').scrollTop(0); // ADD THIS LINE 

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    $('body').addClass('modal-open')

    this.isShown = true

    escape.call(this)
    backdrop.call(this, function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(document.body) //don't move modals dom position
      }

      that.$element
        .show()

      if (transition) {
        that.$element[0].offsetWidth // force reflow
      }

      that.$element.addClass('in')

      transition ?
        that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
        that.$element.trigger('shown')

    })
  }

Again, this was my fix for Twitter Bootstrap 2.0.4

Upvotes: 1

Related Questions