maddisoncr
asked on
Twitter Bootstrap 3 jQuery Validate format issue
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
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
ASKER
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
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
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&
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&
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Cd&