How to fix positioning error with jQuery Validation Engine and Twitter Bootstrap modals

css, html, jquery, jquery-validation-engine, twitter-bootstrap

Solution

You can establish a default position for the error messages when you instantiate/update validationEngine, which will apply to all your validated fields:

$("#formID1").validationEngine({promptPosition : "topRight:-100"});

and/or setup individual position settings for each of your fields:

<input type="text" class="validate[required]" data-prompt-position="bottomRight:-100" />

Problem

I am using Twitter Bootstrap 2.1.0 on my site, I am also using the jQuery Validation Engine 2.6.2 plugin, which these work well together. Until you try to use the validation engine in a modal: Notice how we get a horizontal scroll bar, and the message gets cut off? I am wondering what I can do to fix this?

Original source