Bootstrap validation : 2 glyphicons are overlapping

728
February 21, 2017, at 2:30 PM

I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.

Bootstrap validation glyphicons overlapping

Answer 1

If you're using jQuery:

let's say you have

<div class="container">
  <div class="form">
    form content...
  </div>
</div>

you would call:

$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
  if (i!=0) $(this).remove();
});

this way you get rid of the additional Xes appearing when you don't need.

Answer 2

I have found the answer. I have done it by using jQuery.

My actual HTML was as below,

<div class="input-group">
     <div class="input-group-addon">+</div>
     <input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code"> 
     <input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>

Bootstrap creates glyphicons for correct and wrong below the html as below,

<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>

So I have added following one line code to remove correct and wrong glyphicons for country code field,

$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
Rent Charter Buses Company
READ ALSO
Select Html row and get selected data

Select Html row and get selected data

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!

528
Making responsive multiple divs

Making responsive multiple divs

I have page where I show 4 images - 2 by 2 on each rowI'm trying now to make them responsive when page is open on mobile device but I can't figured it out how to make this

401
document.getElementbyID returns NULL for the DIV with in iFrame

document.getElementbyID returns NULL for the DIV with in iFrame

I have a JSP page which loads a static HTML page using iFrameNow i am trying to change the alignment of one of the DIV (which is there in static HTML page) using the jQuery dynamically

839
css vertical align text middle with overflow hidden

css vertical align text middle with overflow hidden

i'm rendering divs within a loopeach div has a text (could be long- which means overflow: hidden is needed

589