Solved

Twitter Bootstrap 3 jQuery Validate format issue

Posted on 2013-11-21
6
492 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
0
Comment
Question by:maddisoncr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39666373
A fiddle does not help with diagnostics. we need a link to the live page.

Cd&
0
 

Author Comment

by:maddisoncr
ID: 39668567
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39669498
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&
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:maddisoncr
ID: 39670012
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
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39670581
The problem is not that it is a span.  It is always going to left justify because the broken structure of the form has its parent with "form-group" and "has-error" as the class, which has its left margin all the way to the left.  The error message should actually have a parent with class "col-lg-10" and "input group".

I am not an Expert in bootstrap architecture, but basically it looks like  there are contraints that you are going to have to code around to override a pretty obtuse structure that does not bind the error message to the input.

Cd&
0

Featured Post

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question