Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#9772 closed bug (duplicate)

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:


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.

Change History (7)

comment:1 Changed 7 years ago by Scott González

Resolution: duplicate
Status: newclosed

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

comment:2 Changed 7 years ago by jasimon9

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.
  2. Upgraded to 1.10.3 and then dialog titles are truncated.

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

comment:3 Changed 7 years ago by Scott González

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.

comment:4 Changed 7 years ago by jasimon9


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 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.

comment:5 Changed 7 years ago by jasimon9

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;
    width: my_width

comment:6 Changed 7 years ago by tj.vantoll

You can always get the old behavior back with a little bit of CSS:

comment:7 Changed 7 years ago by jasimon9

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.

Note: See TracTickets for help on using tickets.