CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
d3wannabe
d3wannabe

Reputation: 1317

Manually vertically center a bootstrap modal

I have exactly the problem described here...

https://github.com/jschr/bootstrap-modal/issues/132

In summary, I have a single modal with 2 tabs of different heights - when the modal loads (regardless of which tab is selected), it center perfectly, but when I click on a new tab it doesn't recenter taking into account the height of the new tab.

Taking the answer on the github link, I can recentre via the console using...

$('#signInUpModal').modal();

(not exactly as listed on github, but the using ".modal('layout')" errors for some reason whereas ".modal()" works perfectly).

But what's strange is that I get no change whatsoever if I make a call to .modal() on the onclick method of the li elements that must be clicked to toggle a new tab. Here's the relevant code which hopefully tells the story...

<div class="modal fade bs-modal-sm" id="signInUpModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title" id="signInUpTitle" style = "font-weight: bold;">Modal Title</h4>
        </div>
        <div class="bs-example bs-example-tabs">
            <ul id="myTab" class="nav nav-tabs nav-justified"> 
              <!-- TRYING TO CALL .modal() ONCLICK HERE ISN'T WORKING-->
              <li class="active"><a href="#signin" onclick="console.log('clicked'); $('#signInUpModal').modal();" data-toggle="tab">Sign In</a></li>
              <li class=""><a href="#signup" onclick="console.log('clicked'); $('#signInUpModal').modal();" data-toggle="tab">Sign Up</a></li>
            </ul>
        </div>
        <div class="modal-body">
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="signin">
               <form id ="signInForm" class="form-horizontal"> 
                  <!-- the sign in tab form -->
                </form>
            </div> <!-- signin-->
            <div class="tab-pane fade" id="signup">
                <form id ="signUpForm" class="form-horizontal">
                  <!-- the sign up tab form -->
                </form>
            </div> <!-- signup-->
          </div><!-- myTabContent-->
        ...

Any ideas on why this works via the console but not via the onclick method would be hugely appreciated!

Upvotes: 1

Views: 456

Answers (2)

d3wannabe
d3wannabe

Reputation: 1317

This was the code that eventually achieved the result I wanted...

<script>
$(document).ready(function() {

    $('.nav-tabs a').on('shown.bs.tab', function(event){
        $('#signInUpModal').modal();
    });

});
</script>

After reading http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp I realised my initial problem was that the events I was relying on didn't trigger AFTER the CSS transitions that were applied to my modal

Upvotes: 0

plushyObject
plushyObject

Reputation: 1131

Try this:

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Upvotes: 2

Related Questions