Bootstrap input-group elements separating when extending window size

Question

I have a basic Bootstrap input group with an input and button. Everything looks fine when the browser is a "normal" width. However when I extend it to a 2nd monitor there is a space that appears between the input control and the button. Looked around, but I have been unable to find a solution that will keep these together in a way similar to how the btn-group works.

Here's my code:

<div class="row">
    <div class="col-md-2 col-md-offset-1">
        <div class="input-group">
            <input id="SearchText" class="form-control" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
</div>

Thanks in advance!

Update:

After messing with this a little more, it appears it has something to do with the column attributes. If I make the outer div col-md-1 instead, it won't create the space. However this makes the input too small for what I need it for. Also, I'm guessing that if I extended the browser far enough the space would reappear.

George George · Accepted Answer · 2015-07-01T17:17:38

Found a solution that appears to work so I thought I'd share it in case others have a similar issue.

After looking at this more, I discovered that the separation of the input from the button was happening whenever the input control reached its maximum width. In order to maintain the desired proportion dictated by the column attribute tags it created a space between the input and the button (why it doesn't just add blank space after the button, I don't know). There are two ways I found to accomplish what I was wanting:

The first is to directly adjust the maximum width of the input control. This allows the input control to expand and fill the extra space. This can be done in a number of places (css stylesheet, jquery/javascript, or in the tag itself in the html). I went ahead and included it in the stylesheet.

The second way is to include a col-lg-* attribute that is smaller than the col-md-* attribute. This reduces the proportion of the size of the input control in relation to the screen and reduces the likelihood it will reach it's maximum width (it also keeps your input control from expanding nearly as much). (Note: if you use this method I would suggest adjusting the minimum width of your input controls to keep a more consistent size).

In the end I ended up using both methods to keep my input controls about the same size and ensure that someone would have to use a ridiculously large monitor to separate the input and button.

CSS:

input.form-control {
    max-width: 400px;
    min-width: 200px;
}

HTML:

<div class="row">
    <div class="col-md-2 col-md-offset-1 col-lg-1">
        <div class="input-group">
            <input id="SearchText" class="form-control" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
</div>

Hope this helps someone

Bootstrap input-group elements separating when extending window size

1 Answers