CODEWITHSUNDEEP
htmlcssjquery-ui
Lazarus Rising
Lazarus Rising

Reputation: 2685

Setting confirm box dimensions

I have a confirm box created with jquery. Actually, I took the code from http://jqueryui.com/themeroller/#!/ and adapted it to my needs. The thing is that i am using it for two different cases. In the first case, it has a large content, so I set min-width: 60%; to ensure that the content will fit. In the second case I have very little content. So I am trying to set its max-width: 20%; to avoid empty space.

For the first case, this is the div declaration: 

<div id="show_dialog" class="ui-dialog-content ui-widget-content">

and the css:

.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
min-width: 60%;
}

.ui-widget-content {
border: 1px solid #aaaaaa;
background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
color: #222222;
min-width:60%;
}

For the second case, I have this declaration:

<div id="dialog" class="delete test" title="Action can not be reversed!"></div>

And the css:

.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
max-width: 20%;
}

.ui-widget-content {
border: 1px solid #aaaaaa;
background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
color: #222222;
max-width:20%;
}

But both boxes have the same width (60%).

I always had a hard time modifying other people's code but this is driving me crazy. Hope I was enough clear. Any ideas on how to set the size properly?

Update: I tried defining the width here

$("#dialog").dialog({maxWidth: 20 } );
$("#dialog").html('<p>Are you sure you want to delete this?</p>').dialog("open");

Upvotes: 0

Views: 1345

Answers (1)

blgt
blgt

Reputation: 8205

The dialog widget's option you're trying to use for a percentage is actually taken in pixels (ref. maxWidth)

The jQuery way of changing your styles would be with .css():

$(".ui-dialog .ui-dialog-content, .ui-widget-content").css("maxWidth", "20%");

Also be aware that since you're using custom size styles you may want to make the dialog non-resizable:

$("#dialog").dialog({ resizable: false });

Upvotes: 1

Related Questions