Button next to input text bootstrap 3

Question

I’m having a problem that I can’t put my input file button next to my input text. I’ve done some research, tried some things I’ve seen and nothing. Maybe it’s pretty silly, but I’m kind of new to CSS so I get kind of lost

made a Jsfiddle with my current modal with my CSS http://jsfiddle.net/zfLa47g8/

if anyone can give me a hint on how to put this button on the side of the input text I appreciate.

Answer 1

Hey, buddy, all right?

I made a simple example, see if it helps your problem.

jsFiddler Example

I made a list and I put the elements inside, then you hit the margins and everything.

<div class="input-group col-lg-8">
                <ul class="list-inline">
                  <li style="display:inline-table"><span class="input-group-addon glyphicon glyphicon-picture"></span></li>
                  <li style="display:inline-table"><input type="text" class="form-control" placeholder="Adicionar Imagem"></li>
                  <li style="display:inline-table">
                    <span class="btn btn-success fileinput-button">
                       <i class="glyphicon glyphicon-plus"></i>
                       <input id="fileupload" type="file" name="files[]" multiple>
                   </span>

                  </li>
                </ul>                                 
            </div>

If it works out, give it a shot!!! : D

Answer 2

To do what you want with the input (icon + image) I recommend using Input Groups Bootstrap. It’s already prepared for this. And for your alignment problem, just use the Bootstrap memso grid system. Your modified example would look like this:

.modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
}

 <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 17px;">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
                <form method="post" action="#">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">Adicionar Cliente</h4>
            </div>
            <div class="modal-body">

                <div class="input-group col-lg-8">
                <div class="col-md-10 col-lg-10 col-xs-10">
                <div class="input-group">
                  <span class="input-group-addon glyphicon glyphicon-picture" id="basic-addon1"></span>
                   <input type="text" class="form-control" placeholder="Adicionar Imagem"/>
                </div>
               
                </div>
                <div class="col-md-2 col-lg-2 col-xs-2">
                  <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                    <input id="fileupload" type="file" name="files[]" multiple="">
                 </span>
                </div>
                </div>
  
                    
                
                <br>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-briefcase"></span>
                    <input type="text" class="form-control" placeholder="Nome do Usuario">
                </div><br>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-user"></span>
                    <input type="text" class="form-control" placeholder="Email do Usuario">
                </div><br>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-map-marker"></span>
                    <input type="text" class="form-control" placeholder="Estado">
                </div><br>
                    <div class="selectContainer">
                        <select class="form-control" name="plano">
                            <option value="">Escolha um plano</option>
                            <option value="1">Basico</option>
                            <option value="2">Intermediario</option>
                            <option value="3">Avancado</option>

                        </select>
            </div>
        </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger">Adicionar Cliente</button>

                
        </div></form>
        </div></div></div>
</div>
                    
                    
                    
                                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal" style="float: right; margin-right: 50px;">Adicionar Cliente + </button>
<div class="modal-backdrop fade in"></div>

Follow the example in Jsfiddle.

I added Input Group only in the first input, the rest stays with you... Remembering also that if you do not want to use the input group just use only the grids system as in the example.

P.S.: I’ve left the modal opened to save 1 click on the example.