See Full Screen Fiddle Example
I have implemented jQuery dialog to display tables. However, when the table content is long, it extends beyond the screen width. How can I dynamically adjust the dialog width based on the content length? I tried using width:'auto', but it ends up occupying the entire screen.
Here is a sample HTML code snippet:
<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>
<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>
And this is the associated Javascript code:
$(document).ready(function(){
$('.label').each(function() {
var dialogopen = $(this).next(".dialog");
dialogopen.dialog({width:'auto',autoOpen: false,modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
dialogopen.dialog('close');
})
}
});
$(this).click(function(){
dialogopen.dialog('open');
return false;
}
);
});
});