jQuery Forum

When I first started working with jQuery UI I had expected width: auto
to be something that would work out of the box. But the more I hacked
around with the source and the css for the dialog, the more I came to
realize that this simply would not work cross-browser (read: on IE).
What I ended up doing was a multi-fold approach:
- always use a fieldset for the wrapping dialog content container (the
target element for the plugin)
- set a default width in css for the fieldset wrapper, and position
the fieldset offscreen (-10000, -10000), but visible.
- override the width for the fieldset using classes applied in the
html at my whim.
- using a wrapper function, before applying the .dialog(...) plugin, I
measure the fieldset container and then pass the width to the plugin's
init. after the plugin init, I remove the absolute positioning and
top, left coords which forced the element offscreen.
Now, this doesn't really solve auto width, but it made it a no-brainer
to handle widths in the dialogs. In theory, a auto width type effect
could be gained by using max-width on the wrapping dialog container
element, but then we're left with IE6 which doesn't understand
max-width.
Dunno if that'll help, but that's how I overcame that width limitation.
2009/11/7 Scott González <scott.gonzalez@gmail.com>:

I also don't see anything we could for width: 'auto'

Well, if 'auto' was set on init, the same round-about way I went about
solving that could be applied internally.

On Sat, Nov 7, 2009 at 1:56 PM, Andrew Powell <span dir="ltr"><<a href="mailto:powella@gmail.com">powella@gmail.com</a>></span> wrote:

Sure.
When I mentioned that it doesn't solve auto width, I was speaking
towards the css-based solution. It is a programmatic solution, though.
You're correct that I'm setting a specific width during init. It does
not allow for the dialog changing widths dynamically once the dialog
is initialized.
css:
fieldset { min-width: 400px; position: absolute; top: -10000px; left:
-10000px; } /* for ie6 just set width: 400px; */
html:
<fieldset>
....
</fieldset>
This allows for me to always have dialogs on my site at least 400px
wide, which happens to be the decided upon standard size for the
particular app this was designed for. One could do without that
particular css attribute, however. This also allows me to apply
another css class to the element in html to override the size if I
want to set it absolutely, and allows the fieldset to grow
horizontally based on the content - but before the dialog has been
init'd.
My wrapper function then measures the width and sets it within the
.dialog(...) init params.
So to reiterate, it allows for a semi-dynamic width *before* the
dialog is initialized. What this does, is take the thinking out of
having to set the width, or figure out what the width is - takes out
some busy work - and in apps with a large volume of dialog use, it's
nice to have.
Now I would assume that this is the most common use case for the
width: auto; setting, but then I've never had an alternate use for
width: auto. I'd just rather not have to think about figuring out and
setting the width explicitly each time I need to use the dialog.
2009/11/7 Scott González <scott.gonzalez@gmail.com>:
> On Sat, Nov 7, 2009 at 1:56 PM, Andrew Powell <powella@gmail.com>

Thanks for explaining that. An official solution would have to work with someone dynamically changing the content, like height: 'auto' does. It seems like everyone agrees meeting that requirement wouldn't be possible cross-browser. I'll close the ticket tonight or tomorrow unless someone thinks we can actually implement this. If someone figures it out later we can always add it in.

Well really the only programmatic way of handling this, with those
requirements, would be to set the overflow to hidden and allow the
contents of the dialog to overflow, which would then have to be
monitored some way. There's a plugin out there that 'watches' styles
and widths and such, but the last time I played with it, it didn't
work very well.
That's a shame though that you're not willing to implement at least a
partial solution. Some is better than none.
2009/11/7 Scott González <scott.gonzalez@gmail.com>:
> Thanks for explaining that. An official solution would have to work with
> someone dynamically changing the content, like height: 'auto' does. It seems
> like everyone agrees meeting that requirement wouldn't be possible
> cross-browser. I'll close the ticket tonight or tomorrow unless someone
> thinks we can actually implement this. If someone figures it out later we
> can always add it in.
>
>
> On Sat, Nov 7, 2009 at 3:53 PM, Andrew Powell <powella@gmail.com> wrote:
>>
>> Sure.
>>
>> When I mentioned that it doesn't solve auto width, I was speaking
>> towards the css-based solution. It is a programmatic solution, though.
>>
>> You're correct that I'm setting a specific width during init. It does
>> not allow for the dialog changing widths dynamically once the dialog
>> is initialized.
>>
>> css:
>> fieldset { min-width: 400px; position: absolute; top: -10000px; left:
>> -10000px; } /* for ie6 just set width: 400px; */
>>
>> html:
>> <fieldset>
>>  ....
>> </fieldset>
>>
>> This allows for me to always have dialogs on my site at least 400px
>> wide, which happens to be the decided upon standard size for the
>> particular app this was designed for. One could do without that
>> particular css attribute, however. This also allows me to apply
>> another css class to the element in html to override the size if I
>> want to set it absolutely, and allows the fieldset to grow
>> horizontally based on the content - but before the dialog has been
>> init'd.
>>
>> My wrapper function then measures the width and sets it within the
>> .dialog(...) init params.
>>
>> So to reiterate, it allows for a semi-dynamic width *before* the
>> dialog is initialized. What this does, is take the thinking out of
>> having to set the width, or figure out what the width is - takes out
>> some busy work - and in apps with a large volume of dialog use, it's
>> nice to have.
>>
>> Now I would assume that this is the most common use case for the
>> width: auto; setting, but then I've never had an alternate use for
>> width: auto. I'd just rather not have to think about figuring out and
>> setting the width explicitly each time I need to use the dialog.
>>
>> 2009/11/7 Scott González <scott.gonzalez@gmail.com>:
>> > On Sat, Nov 7, 2009 at 1:56 PM, Andrew Powell <powella@gmail.com>

On Sat, Nov 7, 2009 at 5:40 PM, Andrew Powell <span dir="ltr"><<a href="mailto:powella@gmail.com">powella@gmail.com</a>></span> wrote:

I needed to get auto width working cross browser.  To make it work I ended up doing this, and it seems to work across the spectrum:

open: function(event, ui)
{
            $(event.target).dialog('option', 'width', ($(event.target)[0].scrollWidth + 50) + 'px');
            $(event.target).dialog('option', 'position', 'center');
}

Basically I am attaching to the dialog open event.  Then I am getting the width of the actual body size of the dialog div via event.target, and resetting the width of the dialog box to be that width plus 50.  The extra 50 appears to be a bit excessive, but the dialog box has a margin on the left, and it appears to be about 30px's.  After setting the width, it is important to retrigger the position center code because the dialog box will not be correctly centered without it (it will be based on the previous width). 

Please consider including this functionality in the next release of dialog.  Perhaps there would be an easy way to feature check if width: auto is properly supported by a browser, and then only include the code when necessary.  I just made the code run all the time because I didn't want to build and run the check every time a dialog was loaded, but it would be an easy feature to incorporate as part of the initial setup of jquery.ui. 

Here is what I use to emulate width: auto

1.     $('#dialog').dialog({
           width: $(window).width() * (($(window).width() > 1024) ? 0.25 : 0.5)
       });
   

If the window is wider than 1024 pixels, we set the width to 25%, otherwise we set it to 50%. Works pretty good for my needs and unless the values returned by window.width() vary greatly from one browser to the next, this method for a default value in the dialog core should satisfy those wanting it

IE hook for 'max-width' and 'max-height' properties,

div {
    max-width:300px;
    max-height:200px;
    width: expression( this.clientWidth > 299 ? "300px" : "auto" ); /* sets max-width for IE */
    height: expression( this.scrollHeight > 199 ? "200px" : "auto" ); /* sets max-height for IE */
}

Is it possible to do the same for this dialog plug-in?

PL: U mnie co ciekawe działa inherit zapisany w opcjach dialogu. Testowane w IE7, IE8, IE9, Opera, Safari,Firefox,Chrome.

EN: For me what's interesting works inherit saved in the options dialogue. Tested in IE7, IE8, IE9, Opera, Safari, Firefox, Chrome.

$('#my').dialog({ width: 'inherit' });