using jquery layout within twitter bootstrap dialog

Question

I need to use the jquery layout in a bootstrap dialog .I have tried using the jquery layout in a simple example and it works : Simple_Example but when I use it in a dialog it does not seem to work.

The jsfiddle for it : Dialog with layout .

My HTML:

<a href="#" class="btn btn-default" id="openBtn">Open modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-header">
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <div id="content">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-west">West</div>
</div>
  </div>
  <div class="modal-footer">
  </div>
</div>

JS:

$('#openBtn').click(function(){
 $('#content').layout({ applyDefaultStyles: true });
    $('#myModal').modal({show:true})
});

CSS:

#content{

    height:200px;
}

Answer 1

With modals, tabs, etc., you need to wait until the element is sized and in the DOM before modifying or applying functionality to them. In this case, we'll use Bootstrap's shown callback.

http://jsfiddle.net/isherwood/cp67J/1053

$('#openBtn').click(function () {
    $('#myModal').modal({
        show: true
    }).on('shown.bs.modal', function (e) {
        $('#content').layout({
            applyDefaultStyles: true
        });
    });
});

---

Here's how you might prevent the visible style change:

http://jsfiddle.net/isherwood/6Y5DC

#content {
    opacity: 0;
}

$('#openBtn').click(function () {
    $('#myModal').modal({
        show: true
    }).on('shown.bs.modal', function (e) {
        $('#content').layout({
            applyDefaultStyles: true
        });
        $('#content').animate({
            opacity: 1
        }, 400);
    });
});