Forums

jQuery dialog - resizable, width and height issues

Permalink
I am trying to open jQuery dialog from within a block and I am having some issues with resizable, width and height properties.

- resizable:false does not seem to have any effect. Dialog is always resizable.
- width:250 seems to auto collapse the height (height goes down to something like 20px)
- If I just use height and leave out width, it does not seem to have any effect and the dialog window goes back to the default width and height.
- modal:true is always on and can't change it to false

<a class="openHelp"><?php echo t('Help'); ?></div>
<div id="HelpDialog" style="display:none;">
  <p><?php echo t('Help text........'); ?></p>
</div>


$('a.openHelp').click(function() {
  jQuery.fn.dialog.open({
    title: '<?php echo t('Help'); ?>',
    element: '#HelpDialog',
    resizable: false,
    width:250
  });
});


It's just a simple dialog. I think it's supposed to work easily. Am I missing something here? I am using 5.6.2.1.
BlueFractals
 
JohntheFish replied on at Permalink Reply
JohntheFish
The c5 $.dialog actually pre-dates the jquery.ui dialog. Then for c5.5 it was re-written to put a wrapper round the ui dialog. So you don't get the ui dialog directly, but access it through that c5 wrapper.

As a consequence, some properties and events follow the c5.dialog historical settings that are different to the ui settings. Some are fixed, some do not connect. You need to dig through the forums, howtos and documentation for the settings that work with the old c5 dialog, then 'guess' them into place.

It may also be possible to access the ui dialog directly, but not as $.dialog.
BlueFractals replied on at Permalink Reply
BlueFractals
Yeah so basically I MUST use both width and height and cannot use one and leave out the other. That's the only way it seems to work. However "resizable:false" does not seem to work at all. Can't figure out a way to make it work.

I also tried jQuery's dialog:
$('a.openHelp').click(function() {
  $('#HelpDialog').dialog({
    modal: true,
    resizable: false
  });
});


Here everything seems to work well. I don't even have to specify width and height- it automatically fits the content in a dialog of appropriate size. The only issue with this is when I close the dialog and then press the block's Cancel button, it is inactive - the block wouldn't close.