Clever Geek Handbook

The gap between the input and the button

In ASP.Net MVC application, I tried to use an input group for an input and a button pair. I want this to look like this (for example at getbootstrap.com):

enter image description here

But in my application it looks like this: enter image description here

There is a huge space between the entrance and the button. Here is my HTML:

<div class="input-group">
            <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
            <span class="input-group-btn">
                <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
            </span>
        </div>
+3


source to share


3 answers


I find a solution from another site: https://jasenhk.wordpress.com/2014/06/09/mvc-bootstrap-input-group-button-space/

MVC projects have a default css file called "Site.css". You must remove the following lines:



/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
+3


source


I don't think there is anything wrong with your html ... here is a working example of your code with the same button in three different container sizes.

    <div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="input-group">
                <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <div class="input-group">
                <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
            <div class="input-group">
                <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
                </span>
            </div>
        </div>
    </div>
</div>


make sure you provide the correct bootstrap version.

+1


source


Use this

<div class="input-group">

          <input type="text" class="form-control" placeholder="Search for..."><span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div><!-- /input-group -->
0


source






More articles:


All Articles