#9772 closed bug (duplicate)

Opened January 26, 2014 05:47PM UTC

Closed January 26, 2014 06:18PM UTC

Last modified January 27, 2014 04:09PM UTC

Auto width in dialogs does not take the length of the title into consideration

Reported by: jasimon9 Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

This may appear to be a duplicate of #9275 and #4437, but it is not. I tried to update the closed ticket #9275 but at first my attempts were rejected with Captch redirect errors. In any case, both of those tickets are old, closed, and probably a new ticket is justified.

Ticket #4437 applies to IE6/IE7. I have found this problem to occur in IE11 and current versions of Firefox and Chrome as of 26-Jan-14. Therefore it is not a duplicate of that ticket, which is set as "wont'fix", which makes sense relative to the old IE versions.

I found this problem after upgrading from jqueryui 1.8.16 to 1.10.3. Titles which previously were displayed in full are now truncated with the added ellipsis.

To compensate I have added a fixed width. In my case, the width is defaulting to 300 in the dialog with the truncated title; I have to make that 350 for the truncation of the title to be avoided.

The fiddle for the previous tickets does show the problem.

So the workaround is the add the width. Ideally, you would only set the width where the truncation occurs by adding an extra function parameter, but I would hope rather for a corrected computation in the dialog widget to avoid a lot of otherwise unnecessary overriding.

Attachments (0)
Change History (7)

Changed January 26, 2014 06:18PM UTC by scottgonzalez comment:1

resolution: → duplicate
status: new → closed

Duplicate of #4437.Please actually read the resolution in the original ticket. Dialog's don't support auto width. They never have.

Changed January 26, 2014 08:31PM UTC by jasimon9 comment:2

I am not using auto width. That was an aspect of those other tickets. Not this ticket.

Here is what happened:

1. Was using Jquery UI 1.8.16, and dialog titles were not truncated.

1. Upgraded to 1.10.3 and then dialog titles are truncated.

Maybe this is not a bug, but then what is it?

Changed January 26, 2014 08:35PM UTC by scottgonzalez comment:3

Well, you've mentioned auto width several times as well as alluding to the dialog calculating how wide it should be. None of this has ever been supported. See #7773 which will explain why we truncate titles.

Changed January 26, 2014 08:45PM UTC by jasimon9 comment:4

Scott,

I do appreciate you getting back to me.

I am looking at my code, and while width is specified in a number of places, in many others it is not, presumably to accept the "default" width. Looking at http://api.jqueryui.com/dialog/#option-width it appears that the default width is 300. So that is probably when it has been working for me in the past.

Can you clarify if this behavior has changed since 1.8.16, because "it was working fine then". That is, I am having to add the width only after this upgrade.

Changed January 26, 2014 10:11PM UTC by jasimon9 comment:5

Regarding my assertion "that it used to work fine", I would really have to revert back to 1.8.16 of jqueryui to really confirm that. So I did that, and in 1.8.16, the title is not truncated, but rather wraps to a second line.

The change to not wrap is discussed in #7773 as you point out. So rather than a bug, I consider this to be a feature change that I was just not aware of.

Here is a simple solution which applies when you are using a wrapper function as I am: add an optional parameter to the wrapper function. The optional parameter only needs to be added for calls to the wrapper function where the default width does not work. For example, here is the relevant part of my wrapper function, where width_override is the optional parameter:

function dlgConfirm(message, title, okButtonLabel, noButtonLabel, okAction, noAction, width_override)
{
  var my_width = width_override || 300;
  $("<div></div>").dialog({
    ...
    width: my_width
  ...

Changed January 27, 2014 02:11PM UTC by tj.vantoll comment:6

You can always get the old behavior back with a little bit of CSS: http://jsfiddle.net/tj_vantoll/3mhJL/.

Changed January 27, 2014 04:09PM UTC by jasimon9 comment:7

Thanks for that. I did see such suggestions elsewhere. However, my new solution is already in place, and allows having/eating cake, as does the additional CSS.