Bootstrap textbox width and alignment changes when minimizing window

Question

I have below code in my .cshtml file,

<div class="input-group col-lg-2 navbar-right" style="margin-top: 7px">
    <input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
                <i class="fa fa-search"></i>
            </button>
       </span>
</div>

When I minimize the window the textbox appears on top of other controls and width of the textbox changes too.

I tried below css but it doesn't work,

<style type="text/css">
    .form-control {
        width: auto;
        position: absolute;
    }
</style>

Any ideas what I am doing wrong here?

Answer 1

Have you tried to remove the position: absolute and set width:100%;

Answer 2

Try this:

<div class="form-group">
        <div class="col-md-offset-7 col-md-2">
            <input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
        </div>
        <div class="col-md-2">
            <button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
                <i class="fa fa-search"></i>
            </button>
        </div>


        </div>

Then remove the position:absolute

Answer 3

referring to What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

your code does not have col-md-* or col-sm-* so properties on minimizing the browser window are simply undefined.

add classes as

<div class="input-group col-lg-2 col-md-4 col-sm-2 navbar-right" style="margin-top: 7px">