We help IT Professionals succeed at work.

Twitter Bootstrap 3 jQuery Validate format issue

maddisoncr
maddisoncr asked
on
540 Views
Last Modified: 2013-12-02
I am using twitter bootstrap 3 and jQuery Validate..

Everything works well until i try to position an error for an item that has a bootstrap span icon.

As you can see, when the item has an icon, the item goes left. I imagine this is a conflict between the help-block span and the icon span ?

Fiddle
Comment
Watch Question

Top Expert 2013

Commented:
A fiddle does not help with diagnostics. we need a link to the live page.

Cd&

Author

Commented:
Hi

I've put a test page up. There are a few errors scattered around as you can see but the main issue i am having at the moment is with the controls that have the icons inside.. I.e. Email, Web etc..

When you validate client name, the text is position beneath the textbox.. with the icon boxes it gets thrown to the left.

The next issue is with the icons themselves.. For some reason on my form,  the icon doesn't line up properly with the text box.

I am also having responsive issues with the text boxes but haven't had chance to look into that yet. for example. the icon text boxes halve in size when the screen is resized

hope that helps

http://cloud-contractor.co.uk/ClientShow1.php
Top Expert 2013

Commented:
You are injecting a span styled as a block into the display.  Either you want a real span in which case you should not be making is a block element, or if you actually want a block you should be using a div.

Looking at the code, I have no idea what you expect that to do because it is doing exactly what is coded to do.

As for the behavior on a re-size, the inputs without icons are set to a fixed width of 931, and the ones with icons are overriding it from script generated code.  Probably the same generated code as what is screwing up the validation display.

It appears that media queries are either not being used or are incorrect.  

There are just too many thing going on at the same time.  

I think you need to pull back and try one thing at a time. get the pieces working, and then put them together.

Cd&

Author

Commented:
you're right.. i do need to break the bits down..

in relation to where the errors are being placed.. i've chopped around with the form

from what i understand.. the error message is placed after the '<div class="col-lg-10">'. this works fine as can be seen with the client name..

but it doesn't work wheen the input-group class is added.. looking at the bootstrap 3 css, the input-group class is relative.. so i'm guessing that's why the error message doesn't sit where i want it because it's not a block ?

can i work around this ?

thanks for your help

i've updated the form, to show fewer items
Top Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.