Input Groups Bigger Than Input in Bootstrap 3 Using Jumbotron Container

Input groups bigger than input in Bootstrap 3 using Jumbotron container

The bootstrap solution is to add the input-group-lg class on the containing <div> - as shown in the documentation, but you'll notice the addon is still slightly larger than the input so you can just adjust the height of the <input> to match; I added 5 px:

http://jsfiddle.net/DTcHh/21/

Input groups button bigger than input in Bootstrap 3 using Jumbotron container

You could do it by changing the button to a span with role=button on the parent and switching a few styles around, like so

<div class="container-full">
    <div class="jumbotron text-center" style="background-color:transparent; margin:auto">
        <form name="verifyForm" ng-submit="submitForm()" novalidate>
            <div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
                <input type="text" class="form-control" placeholder="Username" style="min-width:15em">
                <span class="input-group-addon"  style="background-color:#6e5cbf;" role="button">
                    <span id="filter" onclick="submitForm();" style="color: #ffffff">
                        >
                    </span>
                </span>
            </div>
        </form>
    </div>
</div>

While the bootstrap documentation doesn't say anything about buttons, it does say

We do not support multiple form-controls in a single input group.

Looking at the styling of buttons vs. form-controls I'd assume that the restriction extends to buttons as well.

---

It's going to look like this (image)

---

input-group-addon height not working properly when using the label element

you just need to put a label outside the div class "form-group https://jsfiddle.net/j1aw98jm/2/

<label>Medical date test <span class="required">*</span></label>
<div class="form-group date input-group">
    <input type="text" class="form-control" name="medical_date_test">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>

Weird rendering in Bootstrap's input groups

I assume you are talking about the double border you see on B? If so its just because there are 1px borders for B and C so when they show next to each other there are 2. This could be easily removed by using something like this:

.form-control {
  border-left: 0;
}

But in doing this it will remove the border and it will show incorrectly if you use this technique with no other button elements next to it. If you add this HTML or view your updated js.fiddle so can see what I mean.

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

    <br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>

<br/><br/>

<div class="input-group">
    <span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
    <span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>

So I believe this is why the Bootstrap team has the double borders there because depending on what you need to do its probably better to have 2 borders on some occasions then none. Hope that helps.

---

Related Topics