EasyUI Forum

General Category => General Discussion => Topic started by: Pierre on May 25, 2014, 03:03:24 AM



Title: Responsive dialog
Post by: Pierre on May 25, 2014, 03:03:24 AM
I started to play with Mobile examples and they looks nice! Is there any example of how to declare some responsive form/dialog/window?
Or any hint of how to use dialog on Mobile devices?
Thanks!


Title: Re: Responsive dialog
Post by: stworthy on May 25, 2014, 05:43:16 PM
The possible solution to make a dialog responsive is to listen to the window's resize event and adjust the size of this dialog. The code below is the simple implementation to achieve this functionality.
Code:
$.extend($.fn.window.methods,{
fluid: function(jq){
if (!$._fluid){
$._fluid = true;
$(window).unbind('.fluid').bind('resize.fluid',function(){
$('div.window').children('div.window-body').window('fluid');
})
}
return jq.each(function(){
var ww = $(window).width();
var opts = $(this).window('options');
if (ww < opts.maxWidth + 50){
$(this).window('resize',{
width: ww - 50
});
} else {
$(this).window('resize',{
width:opts.maxWidth
})
}
$(this).window('center');
})
}
});

Notice that the 'maxWidth' property must be set to limit the width of dialog. Some code looks like this:
Code:
$('#dlg').dialog({
  maxWidth:600
}).dialog('fluid');


Title: Re: Responsive dialog
Post by: Pierre on May 25, 2014, 09:36:27 PM
Hello
great, thanks a lot.