Css grid and input system

Asked

Viewed 153 times

0

Well I’m setting up a grid and some input, yesterday I posted a problem I was having with the grid and FERNANDOSAVIO helped me. I’m having a similar problem when having to put the input inside the grid. Whenever I finish a line it creates a larger space. Does anyone know what it might be? I’ve reviewed the css and could not fix. 

$(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:"\279C";
    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>
<div class="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>

html css

1 answer

1


Watch your class .form_campos, in it there is a height: 31px, but there is also a padding: 5px and a border-bottom-width: 1px, i.e., it takes the 31px + 5px (top) + 5px (bottom) + 1px (border-bottom), which gives a total of 42px height, so it creates this "larger space".

Decrease the height of that class so that the sum of the height plus the padding’s stay in a desirable size.

In my test I changed to 20px high, so yours input will have a total height of 31px.

EDIT:

$(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: 20px;
    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:"\279C";
    color:#484848;
    transform:rotate(90deg);
    right:8px; 
    top:22px;
    position:absolute;
    pointer-events:none;
}
/*====================================================================================================================*/
/* Grid */
/*====================================================================================================================*/
.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>
<div class="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>

  • Well I tried here with 20PX and continued the same way, could edit your answer with the changed code?

  • See above the EDIT. If it’s not that, please explain it better.

  • Good guess I didn’t explain the problem right. Note that whenever I start a new line '<div class="Row">' creates a larger space. Note that the data input without a larger space than the others, as this is where I start a new line. I want to make all of them uniform.

  • Watching in Chrome Developer Tools, the class .row had a margin: 10px, that is, to each new line, had this spacing between them. I removed this margin and also a margin-bottom: 10px in a Media Query. See if that’s it now. If you need to check the styles, open Chrome Developer Tools and edit the CSS there anyway, so you get a sense of what happens, then just take the changes and transfer to your code.

  • OK, that was it

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.