CODEWITHSUNDEEP
jquery-uidialog
Jez
Jez

Reputation: 30071

Specifying jQuery dialog size in ems?

Is there any way to specify a jQuery dialog size in ems? The dialog I'll be displaying will be modal, and non-resizable, so resizing isn't an issue. It should just stick at the size I initially specify.

Upvotes: 0

Views: 388

Answers (2)

Jez
Jez

Reputation: 30071

Instead of specifying the width directly in the dialog call, I think the best way to get the jQuery dialog to a certain height and width in ems is to actually specify the size of the content, then use 'auto' to make the dialog size itself to the content. Here's an example which uses 60em and 30em as the max width and height:

<span id="copyrightLink" style="cursor:pointer;">Copyright dialog popup</span>

<div id="copyrightDialog" title="Copyright information" style="display:none;">
    <div style="max-width:60em; max-height:30em;">
        <p>Copyright information</p>
        <p>Goes here</p>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        $('#copyrightLink').click(function(){
            $('#copyrightDialog').dialog({
                modal: true,
                buttons: {
                    OK: function(){
                        $(this).dialog('close');
                    }
                },
                width: 'auto',
                height: 'auto',
                resizable: false,
                draggable: false
            });
        });
    });
</script>

Upvotes: 1

Naftali
Naftali

Reputation: 146360

Just don't set a start size via the dialog(...) set the dialog size via css and it will be that way to begin with.

See this demo: http://jsfiddle.net/maniator/cQBTb/

Javascript:

$('selector').dialog({
    width: '17em',
    resizable: false,
    modal: true
});​

CSS:

selector {
    height: 15em !important;
}​

Upvotes: 0

Related Questions