Skip to main content

Search and Top Navigation

#15120 closed feature (wontfix)

Opened December 24, 2016 08:16AM UTC

Closed December 24, 2016 03:41PM UTC

Jquery dialog box needs better customization options

Reported by: Jeff-Schafer Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

1. There should be an easy way to add a jQuery built-in ui-icon to the left side of the Titlebar (with the titlebar text after it).

Right now, it appears the only way to get an icon in the Titlebar is to use the following code:

'''$('.ui-dialog-titlebar').append('<span class="ui-icon ui-icon-alert"></span>');

This is really poor since it puts the icon right next to the Close button, AND, each time user opens up the dialog box, it appends another icon to it.

2. There should be an easy way to change the background color of the Titlebar.

Right now, it appears the only way is to use the following code:

$("#dialogError").dialog({

.......

title: "My Error Box",

.......

}).prev(".ui-dialog-titlebar").css("background-color", "#ff1a1a");

Using ".prev" is unintuitive. The user wants to add the background color to THIS element that was selected, not the Previous one.

It would be more intuitive to have a "titleBgColor:" option that would go below the "title:" part shown above.

For example: titleBgColor: "red",

Ditto for the message section of the dialog box ("messageBgColor:").

For example: messageBgColor: "blue",

It can be done with the following, but should be a simple option like the "title:" part is:

$("#dialogError").css("background", "aqua");

I have not found any way to change the background color of the jQuery popup message box at the bottom where the OK button is.

Right now, the only color is white, and looks really poor.

"ui-dialog-titlebar, ui-icon ui-icon-alert"''' do not appear to work.

I don't know if these are bugs, or if they are features that have not been added yet.

I've been Googling everything today to find the answers to these, but these poor work arounds are the only thing I found.

And, nothing for the background color for the bottom part of the dialog box where the OK button is.

Attachments (0)
Change History (1)

Changed December 24, 2016 03:41PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: newclosed
There should be an easy way to add a jQuery built-in ui-icon to the left side of the Titlebar (with the titlebar text after it).

I'm not opposed to this, please file a new issue for this specific feature request only.

This is really poor since it puts the icon right next to the Close button, AND, each time user opens up the dialog box, it appends another icon to it.

So you need to fix your CSS to position it properly. The only reason this would add a new icon on every open is if you told it to. I'm guessing you're running this inisde the open event, instead of once upon creation.

There should be an easy way to change the background color of the Titlebar.

There is, use CSS to change the color via the class.

Using ".prev" is unintuitive.

Because you shouldn't be doing that. You should be using the widget method to move to the generated wrapper, then go down to the titlebar.

The user wants to add the background color to THIS element that was selected, not the Previous one.

No they don't. The element selected is the dialog content, not the dialog itself.

It would be more intuitive to have a "titleBgColor:" option that would go below the "title:" part shown above.

Definitely not. Colors are a style concern, not a behavior concern. Such options have no place in JavaScript.

I have not found any way to change the background color of the jQuery popup message box at the bottom where the OK button is.

That's .ui-dialog-buttonpane and should be styled like everything else, via CSS.

I don't know if these are bugs

In the future, please start in the forums, IRC, or Stack Overflow before filing a ticket. I'm going to close this because it has too many mixed concerns. Please file a new feature request for the titlebar icon.