jQuery UI - Dialog compatibility

[co-operation]

This is not a bug, it is just an enhancement, already talked about within issue #231.

I had the same issue, in my application I have forms in regular pages and in ui-dialogs, maybe it would be an idea to set up an UI-Dialog compatibility mode.

Some lines like the following would solve the problem without breaking any existing code:

css:

@media screen, projection 
{   
    .ve-ui-compatibility .formError { z-index: 990; }
    .ve-ui-compatibility .formError .formErrorContent { z-index: 991; }
    .ve-ui-compatibility .formError .formErrorArrow { z-index: 996; }

    .ve-ui-compatibility .ui-dialog .formError { z-index: 5000; }
    .ve-ui-compatibility .ui-dialog .formError .formErrorContent { z-index: 5001; }
    .ve-ui-compatibility .ui-dialog .formError .formErrorArrow { z-index: 5006; }
}

JavaScript:

    setUiDialogCompatibility : function() {
        if ($('body').hasClass('ve-ui-compatibility') == false) {
            $('body').addClass('ve-ui-compatibility');
        }
    },

[posabsolute]

Hi,

Im all agree for adding

.ui-dialog .formError { z-index: 5000; }
.ui-dialog .formError .formErrorContent { z-index: 5001; }
.ui-dialog .formError .formErrorArrow { z-index: 5006; }

Not sure about the js and all, in what use case would you need it?

[co-operation]

currently .formError * get an z-index of 5000+. .ui-dialog gets an z-index of 1000 by jQueryUI

In order to get the dialog on top of the error messages, the default z-index of error messages would have to be < 1000

But if you use forms (with validation) within a ui-dialog, e.g. as a kind of "input-box", error messages would have to be on top ui-dialogs.

This css would solve both issues:

/* form error on page, dialog will go on top of this */
    .formError { z-index: 990; }
    .formError .formErrorContent { z-index: 991; }
    .formError .formErrorArrow { z-index: 996; }

/* form error inside a form placed in a ui-dialog */    
    .ui-dialog .formError { z-index: 5000; }
    .ui-dialog .formError .formErrorContent { z-index: 5001; }
    .ui-dialog .formError .formErrorArrow { z-index: 5006; }

But, this would change the default z-index of errors from 5000 to under 1000, which could break existing layouts in some cases, this because I thought of this separate flag activated via js, so that it will not effect any existing style by default.

PS: Did I already tell you, that I love this validation engine :-)

[co-operation]

Adding

.ui-dialog .formError { z-index: 5000; }
.ui-dialog .formError .formErrorContent { z-index: 5001; }
.ui-dialog .formError .formErrorArrow { z-index: 5006; }

is not required / will not change sth., because it's the current behavior ".ui-dialog .formError " will inherit settings of ".formError "

[co-operation]

I just made two examples (current & with new css): The second example requires the option "relative: true" to work!

http://data.co-operation.de/validationengine/current.html http://data.co-operation.de/validationengine/ui-dialog-fix.html

[co-operation]

Finally, third version, working with relative: false

css:

    .formError { z-index: 990; }
    .formError .formErrorContent { z-index: 991; }
    .formError .formErrorArrow { z-index: 996; }

    .formErrorInsideDialog.formError { z-index: 5000; }
    .formErrorInsideDialog.formError .formErrorContent { z-index: 5001; }
    .formErrorInsideDialog.formError .formErrorArrow { z-index: 5006; }

Javascipt Change (jquery.validationEngine.js Version 2.5)

1229a1230,1232
>           
>           if (field.closest('.ui-dialog').length)
>               prompt.addClass('formErrorInsideDialog');

Example: http://data.co-operation.de/validationengine/ui-dialog-fix-v2.html

[posabsolute]

Thanks, will have a look at adding those

[posabsolute]

damn this morning im doing everything wrong.. commit : 47eb30f10aa367bcda1dcfe8950901a875eecbfd