How to vertical center dialog box with different hight of tabs?

Question

I know that jquery ui dialog box is centered by default. But I have problem when I put into dialog box tabs. First one is a short login form and the second one is a longer reg form.

When I open the dialog box it is centered, but when i switch on the other tab the dialog box isn't centered vertically.

My question: Is it possible to reposition the dialog box with switching tabs?

Here's my code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style type="text/css">
    form>div{
      margin-bottom: 15px;
    }
    form>div>label{width: 30%; display: inline-block;}
  </style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="styles.css">
  <script>
    $(function() {
        dialog = $( "#dialog" ).dialog({
            autoOpen: false,
        modal: true,
        draggable: false,
        width: 480,
        });
        $( "#open-popUp" ).on( "click", function() {
            dialog.dialog( "open" );
        });
    });
    $( function() {
      $( "#dialog" ).tabs();
    });
  </script>
</head>
<body>

<h1>Test</h1>
<button id="open-popUp">open</button>

<div id="dialog" title="Basic dialog">
  <ul>
    <li><a href="#tabs-login">Login</a></li>
    <li><a href="#tab-reg">Registration</a></li>
  </ul>

  <div id="tabs-login">
    <form>
      <div>
        <label for="inputEmail">Email:</label>
        <input type="email" id="inputEmail" placeholder="Email...">
      </div>
      <div>
        <label for="inputPassword" class="col-sm-3 control-label">Password:</label>
        <input type="password" id="inputPassword" placeholder="Heslo...">
      </div>
      <button type="submit" class="btn btn-default" id="btn-login">Login</button>
    </form>
  </div>

  <div id="tab-reg">
    <form>
      <div>
        <label for="inputFirstName">First name:</label>
        <input type="text" id="inputFirstName" placeholder="Name...">
      </div>
      <div>
        <label for="inputLastName">Last name:</label>
        <input type="text" id="inputLastName" placeholder="Name...">
      </div>
      <div>
        <label for="inputE-mail">E-mail:</label>
        <input type="text" id="inputEmail" placeholder="E-mail...">
      </div>
      <div>
        <label for="inputPassword">Password:</label>
        <input type="password" id="inputPassword" placeholder="Password...">
      </div>
      <div>
        <label for="inputPassword2">Re-password:</label>
        <input type="password" id="inputPassword2" placeholder="Re-password...">
      </div>
      <div>
        <label for="inputBirthday">Birthday:</label>
        <input type="text" id="inputBirthday" placeholder="Birthday...">
      </div>
      <div>
        <label for="inputCity">City:</label>
        <input type="text" id="inputCity" placeholder="City...">
      </div>
      <button type="submit" class="btn btn-default" id="btn-login">Registration</button>
    </form>
  </div>
</div>


</body>
</html>

Created a test fiddle: https://jsfiddle.net/Twisty/t3qnLt2h/ — Twisty, Jan 26 '17 at 19:23
Please explain what you'd want to have happen when you switch tabs? Do you want tab 1 to be the same height as tab 2? Or do you want the dialog box to reposition itself such that it is centered in `window` each time you switch tabs? — Twisty, Jan 26 '17 at 19:25
I want the dialog box to reposition itself such that it is centered in window each time I switch tabs. — pzoli, Jan 26 '17 at 19:34

score 0 · Accepted Answer · edited May 23 '17 at 12:16

I found a useful tidbit here: How to auto-center jQuery UI dialog when resizing browser?

The snippet to use is:

$("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});

Working example from your example: https://jsfiddle.net/Twisty/t3qnLt2h/4/

JavaScript

$(function() {
  function recenter(d) {
    if (typeof d !== "object") {
      d = $(d);
    }
    d.dialog("option", "position", {
      my: "center",
      at: "center",
      of: window
    });
  }

  dialog = $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    draggable: false,
    width: 480,
  });

  $("#open-popUp").on("click", function() {
    dialog.dialog("open");
  });

  $("#dialog").tabs();

  $(".ui-tabs-nav a").on("click", function(e) {
    recenter(dialog);
  });
});

How to vertical center dialog box with different hight of tabs?

1 Answers1