6

I can't get the same effect of the input with the feedback icon as listed on the Bootstrap documentation http://getbootstrap.com/css/#forms-control-validation under the "with optional icons" section.

Here's my code:

  <form role="form" method="post" id="reg_form"> <!-- Reg form -->
    <div class="form-group has-success has-feedback">
    <label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
      <div class="col-sm-8 form-space">
          <input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
          <span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span> 
        <small>Must be between 4-20 characters long</small>   
      </div>
    </div>
  </form> <!-- //Reg form -->

And below that I have some JS to change the icons of checkmark, cross, and warning, but it is not relevant since I can get that to work once I get the basic template going.

Basically, the code outputs indeed the green input box, the green label, and the checkmark but in white and down below the input field (not inside, but outside). What I actually am interested in is to get only the checkmark INSIDE the input field. I am not interested in coloring neither the input field's outlining nor the label.

I read this "warning" below the section's title in the documentation and it said:

Icons, labels, and input groups Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the topvalue. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Apparently I kinda have to add an input group, which I tried, but did not work.

Thank you very much for your time and help! Any help/tips/suggestions will be appreciated.

Zanon
  • 29,231
  • 20
  • 113
  • 126
idelara
  • 1,786
  • 4
  • 24
  • 48
  • Not sure if you were the one who upvoted my answer, but if you could (also) accept it as the correct one (big green checkmark), that would be great! Thanks! – benomatis Mar 21 '14 at 07:20

1 Answers1

4

You missed the class="form-horizontal" from the form tag.

It should be

<form role="form" method="post" class="form-horizontal" id="reg_form"> <!-- Reg form -->
     <div class="form-group has-success has-feedback">
     <label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
       <div class="col-sm-8 form-space">
           <input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
           <span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span> 
           <small>Must be between 4-20 characters long</small>   
       </div>
     </div>
</form> <!-- //Reg form -->

DEMO

To color them all black (instead of green) you could do this additionally:

CSS

.mLabelText, #username-r, #username-fg-sp {
    color: #000 !important;
    border-color: #000;
  }

UPDATED DEMO

benomatis
  • 5,536
  • 7
  • 36
  • 59
  • hi! thank you for your reply and sorry for not responding sooner. I tried your solution and it doesnt seem to work. It is kind of weird... the checkmark still appears down below the input area – idelara Mar 22 '14 at 06:07
  • hm... something else might be influencing it... do you have a link to a working copy of your website using my updated code? – benomatis Mar 22 '14 at 08:55
  • @Vincent you should probably ask the OP (comment in the question) to find out if they resolved this, I never got a reply, as you can see... – benomatis Sep 07 '14 at 17:11
  • Thanks Webeno, I'll do that. I'll let you know if I have better luck. – Vincent Sep 07 '14 at 20:13