jQWidgets Forums

jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable Validator: Position on ‘scrollable’ div

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • luke81
    Member

    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 😉


    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.