I have a problem that I can not put my input file button next to my input text. I searched, tried some things I saw there and nothing. Maybe it's a silly thing, but I'm kind of new to CSS so I'm kind of lost.
I made a JSFiddle with my current modal with my CSS link
If anyone can give me a hint on how to put this button there on the side of the input text, I appreciate it.
To do what you want with input (icon + image) I suggest using Input Groups from Bootstrap. He is already prepared for this. And for your alignment problem, just use Bootstrap's memso grids 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><scriptsrc="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 the Input Group only on the first input, the rest stays with you ... Also remember that if you do not want to use the input group just use the grids system as in the example.
Q: I've already left modal open to save 1 click on the example.
Friend, all good?
I made a simple example, see if it helps your problem.
I made a list and 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, give it a joke !!! : D