Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
            }
        );
  });
});
like image 537
RedGiant Avatar asked May 24 '14 17:05

RedGiant


People also ask

How to change width of jQuery dialog?

Syntax: $( ". selector" ). dialog({ width : 120 });

How to change size of jQuery dialog box?

$(function() { $("#dialog-form"). dialog({ autoOpen: false, maxWidth:600, maxHeight: 500, width: 600, height: 500, modal: true, buttons: { "Create": function() { $(this). dialog("close"); }, Cancel: function() { $(this). dialog("close"); } }, close: function() { } });

How increase jQuery modal width?

You can use class 'modal-dialog' and change the width. You can change the width in success function of Ajax call.

How make jQuery ui dialog responsive?

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.


1 Answers

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"
});
like image 91
Rodney Golpe Avatar answered Oct 19 '22 05:10

Rodney Golpe