dialog auto width

demonstrate how width=auto does not work with jsfiddle iframe

by roblugt

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<body>
    <div>
       <a href="#" id="dlg1">show dialog</a>
    </div>
</body>

CSS

.popup-container {
 	min-width:200px;
	min-height:100px;
}

.ui-dialog {
    /* uncomment the following to work around the problem */
    /* display: inline-block  !important; */ 
}

JavaScript

jQuery(document).ready( function($) {
    console.log("ready");
    $('#dlg1').click(function(event) {
        var tag = $("<div class='popup-dialog'></div>");
        var container = $("<div class='popup-container'>Hello World!</div>");
        tag.append(container);
        tag.dialog({
            autoOpen: true,
            width: 'auto', // when set, in JSFiddle the dialog consumes the whole width of the iframe 
            //width: '300px',
            height: 'auto',
            modal: false,
            resizable: false,
            title: 'DLG1',
            show: { effect: 'fade', duration: 500 },
            hide: 'blind',  
            position: {
                my: "left+20 top+20",
                at: "right bottom",
                of: event
                //offset: "20 20"
            },
            close: function() {
                //console.log("close");
                tag.dialog('destroy');
                tag.detach();
            },
        });
        
      
    });
});