Styling question with modal dialog

[ICampbell]

I have built a modal dialog using your demo logon form as an example. It works perfectly fpr me as a db lookup. Here's my problem..

I am using a style sheet to override the 'theme' behavior eg: ( div.ui-dialog {background-image:none;} ). This also works perfectly.
The problem is that now all of the dialogs are changed to my 'lookup' style. I can't seem to find a style selector that will only affect my dialog.
When I say all, I mean everywhere I use IWCGJQMessageDlg.IWCGMessageDlg(...) dialogs.

Any guidance would be appreciated.

Ian

[Alexander Bulei]

Hi ICampbell,

You need set the custom css name:

delphi code

IWCGJQDialogEx.Css := 'mycustomdlgex';

And them change the css rule to this one:

css code

.mycustomdlgex div.ui-dialog {
  background-image:none;
}

Best Regards.

[Jorge Sousa]

Hi Ian

Since you're using div.ui-dialog it will affect all jQueryUI dialogs

If must use only mycustomdlgex

.mycustomdlgex {
background-image:none;
}

and the set Css = 'mycustomdlgex' to those Dialogs you need.

Regards

cgdevtools st

[Jorge Sousa]

oops double answer sorry

[ICampbell]

Thank you. It is almost working now. My problem is that the dialog (with the new css name) doesn't seem to include the header or the button pane. To illustrate this I have put an outline around the dialog but as you can see it doesn't include the whole form. I can't seem to be able to select the whole form.

LookupDlg.jpg

[Jorge Sousa]

Ian

If you could send us a sample demo with all things you have already, including css file, we could help you more faster and precisely.

Regards

[ICampbell]

I will try to be more accurate and clear. I'll use your modal form demo (V2) as the example.

dialog.jpg

When I set the dialog.css := mycustomdialog, then in the stylesheet, selecting .mycustomdialog (as you suggest) will result in .ui-dialog-content instead of .ui-dialog (see attachment). The title and button pane are not included.


I hope that this is clearer. Ian

[Alexander Bulei]

Now we understand...
But only one way to add your custom class to whole dialog:

- On form create add this code:

delphi code

var
  js: string;
begin
  js:= Format('%s.parent().addClass("mycustomdlgex");',[IWCGJQDialog1.GetIDJQuery]);
  PageContext.AddToOnReady(js);
end;

Best Regards.

[ICampbell]

I can't seem to get this to work

Here's what I put in the form's constructor:

Code: Select all

  js := format( '%s.parent().addClass(''deptLookupEx'')', [dlgDepartmentLookup.GetIDJQuery ] );
 (AOwner as TfrmDailySchedule).PageContext.AddToOnReady( js );


Should I now be able to use "deptLookupEx" as a css class selector? .deptLookupEx ui-dialog ?

I know that I must be missing something.. Ian

[Jorge Sousa]

Hi Ian

you're rendering a javascript text to the html page.

in this case, because it's onready, is after the DOM gets loaded and before load.

js := format( '%s.parent().addClass(''deptLookupEx'')', [dlgDepartmentLookup.GetIDJQuery ] );

the js value will be something this is javascript expression,

$("#DLGDEPARTMENTLOOKUP").addClass('deptLookupEx'');

in this case is an expression using jQuery library.

$(selector)

in the selector part you can use many things, i advise you to research.

one of the selector types, is using just for an HTML ID

$("#HTMLID")

the $(selector) returns an array, depending of the selector.

And then there are a lot of use full methods like

.addClass() .removeClass()

with jQuery you can do many things, and it's always the same code, because it's cross-browser.

I think we can say that anyone doing web apps, even most worried about server, must now as much as js / jQuery as need to now about SQL

Maybe we could start making some topics for the basics of jQuery and css

About your question, I would have to check,

in browser, you can try execute this code

$("#DLGDEPARTMENTLOOKUP").addClass('deptLookupEx'');

in browser console to check the effect.

Best Regards