Well I'm setting up a grid and some input, yesterday I posted a problem that was having the grid and FERNANDOSAVIO helped me. I'm having a similar problem when having to put the input into the grid. Whenever I finish a line it creates a larger space. Does anyone know what can it be? I already ran the css and could not fix it.
$(document).ready(function () {
$('.form_campos').on('focus blur', function (e) {
$(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');
$('.select').on('change blur', function (e) {
$(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
}).trigger('blur');
$(".autofocus").trigger('focus');
// Converte minusculas em maiusculas
$('input').not('[name="link"]').on('input', function () {
// Armazena posição corrente do cursor
var start = this.selectionStart, end = this.selectionEnd;
this.value = this.value.toUpperCase();
// Restaura posição armazenada anteriormente.
this.setSelectionRange(start, end);
});
});
/*====================================================================================================================*/
/* Input */
/*====================================================================================================================*/
.form-group {
margin-top: 20px;
position: relative;
display: flex;
height: 45px;
float: left;
}
.control-label {
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(5px, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
}
.form-group.focused .control-label, .form-group-select.focused .control-label {
opacity: 1;
transform: scale(0.75);
}
.form_campos {
height: 31px;
width: 100%;
color: #484848;
align-self: flex-end;
padding: 5px;
outline: none;
border: 0 solid #484848;
border-bottom-width: 1px;
background: transparent;
border-radius: 0;
}
.form_campos:hover, .form_campos:focus {
border-color: #0091FF;
}
.form_disabled, .form_disabled:hover, .form_disabled:focus {
border-color: #D7D7D7;
}
/*====================================================================================================================*/
/* Select */
/*====================================================================================================================*/
.select {
height: 31px;
color: #484848;
border-radius: 0;
border: 0 solid #484848;
border-bottom-width: 1px;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
outline: none;
margin-top: 14px;
background: transparent;
padding-right: 20px;
text-overflow: ellipsis;
overflow: hidden;
}
select::-ms-expand {
display: none;
}
.select:hover, .select:focus {
border: 0 solid;
border-bottom-width: 1px;
border-color: #0091FF;
}
.form-group-select {
margin-top: 20px;
position: relative;
height: 45px;
float: left;
}
.form-group-select:after {
content:"9C";
color:#484848;
transform:rotate(90deg);
right:8px;
top:22px;
position:absolute;
pointer-events:none;
}
/*====================================================================================================================*/
/* Grid */
/*====================================================================================================================*/
.row {
margin: 10px;
}
.row,
.column {
box-sizing: border-box;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.column {
float: left;
}
.row > .column:last-child {
margin-bottom: 0;
}
.column + .column {
margin-left: 1.6%;
}
.column-1 {
width: 6.86666666667%;
}
.column-2 {
width: 15.3333333333%;
}
.column-3 {
width: 23.8%;
}
.column-4 {
width: 32.2666666667%;
}
.column-5 {
width: 40.7333333333%;
}
.column-6 {
width: 49.2%;
}
.column-7 {
width: 57.6666666667%;
}
.column-8 {
width: 66.1333333333%;
}
.column-9 {
width: 74.6%;
}
.column-10 {
width: 83.0666666667%;
}
.column-11 {
width: 91.5333333333%;
}
.column-12 {
width: 100%;
margin-left: 0 !important;
}
/* Mobile */
@media only screen and (max-width: 900px) {
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
width: auto;
float: none;
}
.column + .column {
margin-left: 0;
}
.row {
margin-bottom: 10px;
}
.column {
margin-bottom: 10px;
}
.row:last-child .column:last-child {
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
<div class='form-group-select column column-4'>
<label class='control-label'>GOSTOU?</label>
<select name='gostou' class='select form_campos'>
<option value="s">SIM</option>
<option value="n">NÃO</option>
</select>
</div>
<div class='form-group column column-8'>
<label class='control-label' for='nome'>AQUI ELE CRIA UM ESPAÇO MAIOR</label>
<input type='text' class='form_campos' id='nome' name='nome'>
</div>
</div>
<div class="row">
<div class='form-group column column-2'>
<label class='control-label' for='data'>DATA</label>
<input type='text' class='form_campos data' id='data' name='data'>
</div>
<div class='form-group column column-2'>
<label class='control-label' for='idade'>IDADE</label>
<input type='text' class='form_campos' id='idade' name='idade'>
</div>
<div class='form-group column column-8'>
<label class='control-label' for='cidade'>CIDADE</label>
<input type='text' class='form_campos' id='cidade' name='cidade'>
</div>
</div>