Closed co-operation closed 12 years ago
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?
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 :-)
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 "
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
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
Thanks, will have a look at adding those
damn this morning im doing everything wrong.. commit : 47eb30f10aa367bcda1dcfe8950901a875eecbfd
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:
JavaScript: