With many sites leveraging jQuery UI, there are some major shortcomings that have to be overcome because jQuery UI does not support responsive design and there's a longstanding bug when maxWidth
is used in conjunction with width:'auto'
.
So the question remains, how to make jQuery UI Dialog responsive?
Thanks for the posts! This saved me a great deal of time.
I would also like to add, though, that I was getting some funky positioning when the dialog first opened on certain screen sizes. If you encounter such an error, try doing something like this:
Hopefully this saves someone a headache =)
I have managed to to a responsive dialog with old
like this
Resize the window on JSFiddle result and click "Run".
Setting
maxWidth
oncreate
works fine:Thank you, this makes responsive, but I still had an issue with the dialog being offcenter b/c my content (django form template) was loading after the dialog opened. So Instead of
$( "#my-modal" ).load(myurl).dialog("open" );
, I call$( "#my-modal" ).dialog("open" );
Then in the dialog, I add the option'open'
and call a load, then yourfluidDialog()
function:in the dialog options (modal, fluid, height..etc):
I gathered these codes from several sources and I put them together. This is how I came up with a responsive jQuery UI Dialog. Hope this helps..
I have managed to do responsive dialog like this. Because use percent on
maxWidth
looked weird.