CODEWITHSUNDEEP
jqueryjquery-uiresponsive-designjquery-dialogcss
Jason
Jason

Reputation: 7682

Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

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?

Upvotes: 47

Views: 96796

Answers (15)

Sergey kan
Sergey kan

Reputation: 1

Creating a maximum window in advance is not very good. I liked css: <style> .ui-dialog{ max-width: calc(100% - 20px) !important; } </style> a good solution. And if we complicate the task? After the window is displayed, there is a request to the database and filling an empty BODY in the table. After inserting the data, the dialog size changes. There is not enough automatic centering. It is possible to do this for .ui-dialog using css?

Upvotes: 0

Jason
Jason

Reputation: 1028

For me, I liked gracia's answer the most. The gist of gracia's answer was using simple JS ternary operator to set the width:

    $("#dialogDiscount").dialog({
        autoOpen: false,
        modal: true,
        width: $(window).width() > 500 ? 450 : 300,  //this is what fixed it for me
        show: {
            effect: "fade",
            duration: 500
        }
    });

Just so you have more information about my context, I was having the too-big-dialog issue only in the portrait view on iPhone. CSS solutions above had the impact of sometimes showing the transformations (starts out big, then morphs to smaller size, etc.) So I think creating the dialog at the right size is important. And gracia's solution uses number in pixels, instead of percentage, because a number in px is what jQuery-ui dialog expects, without having to modify things. Hope this helps someone!

Upvotes: -1

Adam Jimenez
Adam Jimenez

Reputation: 3145

The accepted solution is rather buggy and overengineered imo. I came up with dialogResize which is cleaner and more straightforward for my purposes.

Implement like so:

$("#dialog").dialogResize({
  width: 600,
  height: 400,
  autoOpen: true,
  modal: true
});

Demo

Upvotes: 0

Himalaya Garg
Himalaya Garg

Reputation: 1609

$("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

This Worked for me

Upvotes: 3

amchugh89
amchugh89

Reputation: 1296

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 your fluidDialog() function:

in the dialog options (modal, fluid, height..etc):

open: function () {
    // call LOAD after open
    $("#edit-profile-modal").load(urlvar, function() {
    // call fluid dialog AFTER load
    fluidDialog();
});

Upvotes: 0

Fang Fang
Fang Fang

Reputation: 73

I just found a solution for this issue.

I pasted my css style, hope this can help someone

.ui-dialog{
  position: fixed;

  left: 0 !important;
  right: 0 !important;

  padding: rem-calc(15);
  border: 1px solid #d3dbe2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  max-width: rem-calc(620);
  top: rem-calc(100) !important;

  margin: 0 auto;
  width: calc(100% - 20px) !important;
}

Upvotes: 2

iautomation
iautomation

Reputation: 1084

No need for jQuery or Javascript. CSS solves everything for this.

This is my project solution for a responsive jquery dialog box. Default width and height, then max width and height for as small as the browser shrinks. Then we have flexbox to cause the contents to span the available height.

Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/1/

EDIT

Updated centering technique to support resizing and dragging

.ui-dialog {
    z-index:1000000000;
    top: 0; left: 0;
    margin: auto;
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ui-dialog .ui-dialog-content {
    flex: 1;
}

Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/6/

Upvotes: 13

Jeffrey Simon
Jeffrey Simon

Reputation: 1034

I am not sure that my simple solution solves the problem of this question, but it works for what I am trying to do:

$('#dialog').dialog(
{
    autoOpen: true,
    width: Math.min(400, $(window).width() * .8),
    modal: true,
    draggable: true,
    resizable: false,
});

That is, the dialog opens with a 400px width, unless the width of the window requires a smaller width.

Not responsive in the sense that if the width is narrowed the dialog shrinks, but responsive in the sense that on a specific device, the dialog will not be too wide.

Upvotes: 3

gracia16
gracia16

Reputation: 113

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..

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
  $(document).ready(function() {
  $("#dialog-message").dialog({
    modal: true,
    height: 'auto',
    width: $(window).width() > 600 ? 600 : 'auto', //sets the initial size of the dialog box 
    fluid: true,
    resizable: false,
    autoOpen: true,
    buttons: {
       Ok: function() {
         $(this).dialog("close");
       }
    }
  });
    $(".ui-dialog-titlebar-close").hide();
  });
  $(window).resize(function() {
  $("#dialog-message").dialog("option", "position", "center"); //places the dialog box at the center
  $("#dialog-message").dialog({
    width: $(window).width() > 600 ? 600 : 'auto', //resizes the dialog box as the window is resized
 });
});
</script>

</head>
<body>

<div id="dialog-message" title="Responsive jQuery UI Dialog">
  <p style="font-size:12px"><b>Lorem Ipsum</b></p>
  <p style="font-size:12px">Lorem ipsum dolor sit amet, consectetur 
   adipiscing elit. Quisque sagittis eu turpis at luctus. Quisque   
   consectetur ac ex nec volutpat. Vivamus est lacus, mollis vitae urna 
   vitae, semper aliquam ante. In augue arcu, facilisis ac ultricies ut, 
   sollicitudin vitae  tortor. 
  </p>
</div>

</body>
</html>

Upvotes: 8

Adrian P.
Adrian P.

Reputation: 5228

I have managed to to a responsive dialog with old 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

like this

            var dWidth = $(window).width() * 0.9;
            var dHeight = $(window).height() * 0.9; 

            $('#dialogMap').dialog({
                autoOpen: false,
                resizable: false,
                draggable: false,
                closeOnEscape: true,
                stack: true,
                zIndex: 10000,
                width: dWidth,
                height: dHeight,    
                modal: true,
                open:function () {          

                }
            });
            $('#dialogMap').dialog('open');

Resize the window on JSFiddle result and click "Run".

Upvotes: 3

Jason
Jason

Reputation: 7682

Below is how I achieved a responsive jQuery UI Dialog.

To do this, I added a new option to the config - fluid: true, which says to make the dialog responsive.

I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.

You can see it in action here: http://codepen.io/jasonday/pen/amlqz

Please review and post any edits or improvements.

// Demo: http://codepen.io/jasonday/pen/amlqz
// [email protected]

$("#content").dialog({
    width: 'auto', // overcomes width:'auto' and maxWidth bug
    maxWidth: 600,
    height: 'auto',
    modal: true,
    fluid: true, //new option
    resizable: false
});


// on window resize run function
$(window).resize(function () {
    fluidDialog();
});

// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
        // if fluid option == true
        if (dialog.options.fluid) {
            var wWidth = $(window).width();
            // check window width against dialog width
            if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
                // keep dialog from filling entire screen
                $this.css("max-width", "90%");
            } else {
                // fix maxWidth bug
                $this.css("max-width", dialog.options.maxWidth + "px");
            }
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }
    });

}

EDIT

Updated approach: https://github.com/jasonday/jQuery-UI-Dialog-extended

The repository above also includes options for:

  • Click outside of dialog to close
  • Hide title bar
  • hide close button
  • responsive (to address above)
  • scale width & height for responsive (ex: 80% of window width)

Upvotes: 69

kiranutt
kiranutt

Reputation: 31

If your site is restricted to a max size, then below approach will work. Attach a css style to your dialog.

.alert{
    margin: 0 auto;
    max-width: 840px;
    min-width: 250px;
    width: 80% !important;
    left: 0 !important;
    right: 0 !important;
}

$('#divDialog').dialog({
    autoOpen: false,
    draggable: true,
    resizable: true,
    dialogClass: "alert",
    modal: true
});

Upvotes: 2

Chandler Zwolle
Chandler Zwolle

Reputation: 1725

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:

if (wWidth < dialog.options.maxWidth + 50) {
    // keep dialog from filling entire screen
    $this.css("max-width", "90%");

    // ADDED
    $this.css("left", "5%");
} else {
    // fix maxWidth bug
    $this.css("max-width", dialog.options.maxWidth);

    // ADDED
    var mLeft = (wWidth - dialog.options.maxWidth) / 2;
    $this.css("left", mLeft + "px");
}

Hopefully this saves someone a headache =)

Upvotes: 0

everis
everis

Reputation: 316

I have managed to do responsive dialog like this. Because use percent on maxWidth looked weird.

var wWidth = $(window).width();
var dWidth = wWidth * 0.8;

$('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
        $(this).css('maxWidth', dWidth);
    }
});

Upvotes: 1

tsi
tsi

Reputation: 1264

Setting maxWidth on create works fine:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});

Upvotes: 44

Related Questions