2

So I've run into an interesting issue with Twitter Bootstrap 3 .. seems like there's a formatting issue when doing validation on input add-on's within a form. The add-on get's shifted in sizing and in the case of a button just shifted. Direct from the twitter bootstrap page

    <div class="input-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>

Looks like the following

Screen Shot of Issue

Here's a JSFiddle to play with

http://jsfiddle.net/HdxT3/

Thoughts on how to fix this?

3 Answers 3

5

No need for all the CSS modifications. Bootstrap allows you to do this natively:

<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <div class="input-group">    
        <input type="text" class="form-control"/>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</div>
5
  • The OP does not use CSS.. they purely uses classes in their Fiddle.
    – ddavison
    Feb 6, 2014 at 18:33
  • Yes, I'm referring to the CSS hacks in the other answers. I'm telling OP that he doesn't need those because he can do it purely in Bootstrap.
    – Leo Jweda
    Feb 6, 2014 at 18:34
  • 1
    I'm adding a comment to my answer but I'll leave it in case it helps others. This is the better solution. Feb 6, 2014 at 18:35
  • 4
    Is it just me, or this no longer works. It only styles the inputbox, but not the button.
    – Genu
    Jun 3, 2014 at 20:12
  • Trying it in the jsfiddle that OP used it does seem like it doesn't work anymore.
    – Leo Jweda
    Jun 3, 2014 at 23:09
0

I changed the structure a little bit, and added some css

Mark-up

  <div class="input-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success
        <span class="input-group-btn">
       <input type="text" class="form-control"/> 
       <button class="btn btn-default" id="style" type="button">Go!</button>
        </span>     
        </label>
    </div>

CSS

#style{

    margin-left: -4px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-left: none;
}

Sample Fiddle

0

In your CSS:

.control-label{
    display: table-caption;
}

http://jsfiddle.net/HdxT3/3/

1
  • You should use Leo Jweda's answer instead, it is the proper way to do it using the standard Bootstrap controls. Feb 6, 2014 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.