CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
RedGiant
RedGiant

Reputation: 4748

jQueryUI dialog width

Fiddle Full Screen Example

I use jQuery dialog to open tables. Some of them have a large amount of text and they tend to be too long and go way off the screen. How can I make the dialog wider if the table is too long like the first one in the fiddle? I've tried width:'auto' but it seems to just occupy the entire screen.

HTML:

<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>
<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>

Javascript:

$(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;
            }
        );
  });
});

Upvotes: 21

Views: 55208

Answers (2)

estinamir
estinamir

Reputation: 503

Dialogue with responsive width and height, source

 $(".order-later-button").click(function () {
        var screenWidth, screenHeight, dialogWidth, dialogHeight, isDesktop;    
        screenWidth = window.screen.width;
        screenHeight = window.screen.height;    

        if (screenWidth < 500) {
            dialogWidth = screenWidth * .95;
            dialogHeight = screenHeight * .95;
        } else {
            dialogWidth = 500;
            dialogHeight = 500;
            isDesktop = true;
        }

        $("#dialogOrderLater").dialog({
            title: "Job Close?",
            buttons: {
                "Close": function () {
                    $(this).dialog('close');
                },
                "OK": function () {
                    window.location = YOUR_URL;
                }
            },                        
            draggable: false,
            modal: true,
            height: dialogHeight,
            width: dialogWidth,
            closeOnEscape: false
        });
    });

Upvotes: 2

Rodney G
Rodney G

Reputation: 4826

I'd suggest adding width and maxWidth to your dialog options. I don't know what your design looks like, but try something like this, for example:

dialogopen.dialog({
   autoOpen: false,
   modal: true,
   open: function(){
      jQuery('.ui-widget-overlay').bind('click',function(){
         dialogopen.dialog('close');
      });
   },
   width: "90%",
   maxWidth: "768px"
});

Upvotes: 38

Related Questions