Gridstack Iframe Problem
iframe causes problem sizing item smaller.
click 'Add a new widget'.
Try to reduce the widget size quickly (works fine if done slowly)
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.min.css">
<button class="btn btn-primary add-widget-box">Add a new widget</button>
<div class="grid-stack" data-gs-width="12">
</div>
CSS
.grid-stack-item-content {
background: rgba(255, 0, 0, 0.1);
}
JavaScript
$(function () {
$('.grid-stack').gridstack({
animate: false,
auto: false,
width: 12,
float: false,
vertical_margin: 0,
always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
disableDrag: true,
disableResize: true
});
$('.grid-stack-placeholder').remove();
this.grid = $('.grid-stack').data('gridstack');
this.add_widget = function(){
var id = 1234;
var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);
console.log('testing')
$('.grid-stack-item-content[data-id="'+id+'"]').append('<iframe style="width:100%; height:100%;" src="https://www.noojee.com.au"></iframe>');
}.bind(this);
this.clear_grid = function () {
this.grid.remove_all();
}.bind(this);
$('.clear-customization, .customize-pages-list li').click(this.clear_grid);
$('.add-widget-box').click(this.add_widget);
});