jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validator: Position on ‘scrollable’ div
Tagged: jqxvalidator, validator
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 9 months ago.
-
Author
-
Hi,
I have a problem with jqxValidator and fields inside a ‘scrollable’ div (css fixed height with overflow auto).
The problem: jqxValidator hints appear outside of the div, because their position is setted to ‘absolute’.
Question: Is there a solution (or workaround) to show hints inside the div?
This is my HTML snippet (simplified):
<form id="myForm" method="post" action="#"> <label for="inputFirst">First Field</label> <input type="text" id="inputFirst" /> <div class="property-box"> <label for="input1">Field1</label> <input type="text" id="input1" /> <label for="input2">Field2</label> <input type="text" id="input2" /> <label for="input3">Field3</label> <input type="text" id="input3" /> <label for="input4">Field4</label> <input type="text" id="input4" /> <label for="input5">Field5</label> <input type="text" id="input5" /> <label for="input6">Field6</label> <input type="text" id="input6" /> <label for="input7">Field7</label> <input type="text" id="input7" /> <label for="input8">Field8</label> <input type="text" id="input8" /> <label for="input9">Field9</label> <input type="text" id="input9" /> <label for="input10">Field10</label> <input type="text" id="input10" /> </div> <input type="submit" id="submit" value="Submit" /> </form>
and Javascript code:
$(document).ready(function () { $('#myForm').jqxValidator({ rules: [ { input: '#inputFirst', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input1', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input2', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input3', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input4', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input5', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input6', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input7', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input8', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input9', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input10', message: 'Required!', action: 'keyup', rule: 'required' } ], arrow: false, scroll: false, focus: false }); $('#submit').bind('click', function () { return $('#myForm').jqxValidator('validate'); }); $('.property-box').scroll(function () { $('#myForm').jqxValidator('updatePosition'); }); });
and last CSS style:
.property-box { margin-top: 20px; margin-bottom: 20px; width: 400px; height: 200px; overflow: auto; border: 1px solid #ccc; padding: 12px; }
Best regards.
Luke
P.S.: Sorry for my bad english
Hi Luke,
It is possible to change the Hints parent element, but the position will stay absolute as the hints work as small prompt popups.
To set the hints parent, set the jqxValidator’s
<script type="text/javascript"> $(document).ready(function () { $('#myForm').jqxValidator({ownerElement: $('.property-box')[0], rules: [ { input: '#inputFirst', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input1', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input2', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input3', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input4', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input5', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input6', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input7', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input8', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input9', message: 'Required!', action: 'keyup', rule: 'required' }, { input: '#input10', message: 'Required!', action: 'keyup', rule: 'required' } ], arrow: false, scroll: false, focus: false }); $('#submit').bind('click', function () { return $('#myForm').jqxValidator('validate'); }); $('.property-box').scroll(function () { $('#myForm').jqxValidator('updatePosition'); }); });</script>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.