Leave Input next to Label [duplicate]

Navigation
1

How to align the inputs with the label

Good afternoon, I have a dynamic form, it is done using Bootstrap and the inputs/Labels comes according to the data of the bank, everything is correct, however in the view the inputs are getting below Label and not next as it was meant to be.

Jquerythatmountsmyform

$.getJSON($('#base-url').val()+'/atleta/get_input_area_avaliar',function(data){for(vari=0;i<data.length;i++){form+='<divclass=\"col-md-12\">';
                        if(i == 0 || data[i]['descricao_tecnica'] != data[i-1]['descricao_tecnica']){ 
                            form += '<p style=\"font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;\" class=\"text-center\"><span>'+data[i]['descricao_tecnica']+'</span></p>'; 
                        }
                        form += '<div><label for=\"'+data[i]['cod_area_avaliar_item']+'\">'+data[i]['descricao_item']+':</label></div>';

                        form += '<select style=\"width:65px;\" class=\"form-control\" id=\"item_'+ data[i]['cod_area_avaliar_item'] +'\" name=\"item_'+ data[i]['cod_area_avaliar_item'] +'\">';
                        form += '<option value=\"--\" disabled selected>---</option>';
                        form += '<option value=\"10\">10</option>';
                        form += '<option value=\"9\">9</option>';
                        form += '<option value=\"8\">8</option>';
                        form += '<option value=\"7\">7</option>';
                        form += '<option value=\"6\">6</option>';
                        form += '<option value=\"5\">5</option>';
                        form += '<option value=\"4\">4</option>';
                        form += '<option value=\"3\">3</option>';
                        form += '<option value=\"2\">2</option>';
                        form += '<option value=\"1\">1</option>';
                        form += '</select>';
                        form += '<br>';
                        form += '</div>';
                }
                $('#frmNovaAvaliacao #inputs_avaliacao').html(form);
            });

HTML where the form is inserted 

<div id="frmAvaliacaoItem" style="overflow-y: auto;" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <form onsubmit="salvar_area_avaliacao_item(); return false;" style="margin-bottom:0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel"></h3>
            </div>
            <div class="modal-body">
                <div class="alert" style="display:none;"></div>


            <div class="col-md-12">                                        
                <input id="cod_area_avaliar_item" type="hidden" name="cod_area_avaliar_item" value="null"/>
                <div class="col-md-12">
                        <label for="descricao">Descrição</label>
                        <input type="text" class="form-control" name="descricao" id="descricao" required/>
                </div>
                </div>

                <div class="col-md-12">
                <br>
                    <table id="tbl-area_avaliar_item" class="table table-sm table-hover">
                        <thead>

                            <tr>
                                <th scope="col">Tipo de avaliação técnica</th>
                                <th scope="col">Descrição</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                <button type='submit' class='btn btn-primary'>Salvar</button>
                </div>
            </div>
        </div>
    </form>
</div>

HTML Rendering

I'm not using css external, only bootstrap 

<div id="frmNovaAvaliacao" style="overflow-y: auto; display: block;" class="modal fade in" role="dialog" aria-hidden="false">
<div class="modal-dialog" role="document">
    <form class="form-horizontal" onsubmit="salva_avaliacao(); return false;" style="margin-bottom:0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel"></h3>
            </div>
            <div class="modal-body">
                <div class="col-md-12" style="margin-bottom:30px;">
                    <input style="float:right; border-radius:2px" type="text" name="data_avaliacao" id="data_avaliacao" placeholder="dd/mm/yyyy"> </div>
                <input id="cod_escola" type="hidden" name="cod_escola" value="301">
                <input id="cod_atleta_area_avaliar" type="hidden" name="cod_atleta_area_avaliar" value="0">
                <input id="cod_atleta" type="hidden" name="cod_atleta" value="353">
                <!-- Montar formulario pelo JS -->
                <div id="inputs_avaliacao_hidden"></div>
                <div id="inputs_avaliacao">
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Aspecto Fisico</span></p>
                        <label for="45">Velocidade:</label>
                        <select style="width:65px;" class="form-control" id="item_45" name="item_45">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="20">Força:</label>
                        <select style="width:65px;" class="form-control" id="item_20" name="item_20">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="19">Biotipo:</label>
                        <select style="width:65px;" class="form-control" id="item_19" name="item_19">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Habilidade motora</span></p>
                        <label for="52">Condução/controle de bola:</label>
                        <select style="width:65px;" class="form-control" id="item_52" name="item_52">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="53">Desarme:</label>
                        <select style="width:65px;" class="form-control" id="item_53" name="item_53">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="55">Passe:</label>
                        <select style="width:65px;" class="form-control" id="item_55" name="item_55">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="56">Drible:</label>
                        <select style="width:65px;" class="form-control" id="item_56" name="item_56">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="57">Chute:</label>
                        <select style="width:65px;" class="form-control" id="item_57" name="item_57">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="58">Cabeceio:</label>
                        <select style="width:65px;" class="form-control" id="item_58" name="item_58">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Inteligencia de jogo</span></p>
                        <label for="23">Tomada de decisão:</label>
                        <select style="width:65px;" class="form-control" id="item_23" name="item_23">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="51">Tática individual:</label>
                        <select style="width:65px;" class="form-control" id="item_51" name="item_51">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="22">Criatividade:</label>
                        <select style="width:65px;" class="form-control" id="item_22" name="item_22">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="28">Liderança:</label>
                        <select style="width:65px;" class="form-control" id="item_28" name="item_28">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="50">Competitividade:</label>
                        <select style="width:65px;" class="form-control" id="item_50" name="item_50">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Teste de avaliacao</span></p>
                        <label for="62">Item 2:</label>
                        <select style="width:65px;" class="form-control" id="item_62" name="item_62">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-12">
                        <label for="63">Item 1:</label>
                        <select style="width:65px;" class="form-control" id="item_63" name="item_63">
                            <option value="--" disabled="" selected="">---</option>
                            <option value="10">10</option>
                            <option value="9">9</option>
                            <option value="8">8</option>
                            <option value="7">7</option>
                            <option value="6">6</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                        <br>
                    </div>
                </div>
                <p style="font-weight: bold;">Legenda: </p>
                <p style="font-size:12px;"> <em>(10)</em> Excelente A - <em>(9)</em> Excelente B - <em>(8)</em> Bom A - <em>(7)</em> Bom B - <em>(6)</em> Regular A - <em>(5)</em> Regular B - <em>(4)</em> Fraco A - <em>(3)</em> Fraci B - <em>(2)</em> Péssimo A - <em>(1)</em> Péssimo B </p>
                <div class="form-group" style="margin: 30px 0 30px 0;">
                    <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Relatório aprovação/reprovação</span></p>
                    <textarea class="form-control" rows="5" id="relatorio" name="relatorio"></textarea>
                </div>
                <br>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="treinador">Treinador</label>
                            <input type="text" class="form-control" name="treinador" id="treinador"> </div>
                        <div class="col-md-6">
                            <label for="preparador">Preparador Fisico</label>
                            <input type="text" class="form-control" name="preparador" id="preparador"> </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="supervisor">Supervisor</label>
                            <input type="text" class="form-control" name="supervisor" id="supervisor"> </div>
                        <div class="col-md-6">
                            <label for="coordenador">Coordenador Técnico</label>
                            <input type="text" class="form-control" name="coordenador" id="coordenador"> </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="modal-footer" style="margin-top:20%;">
                <button id="btn_salvar_avaliacao" type="submit" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </form>
</div>

    
asked by anonymous 30.10.2018 / 20:56

2 answers

1

I do not have an environment that can test your code, but I can assure you that by putting label inside a div like you did here: 

form += '<div><label for=\"'+data[i]['cod_area_avaliar_item']+'\">'+data[i]['descricao_item']+':</label></div>';

% w / w will cause the "line to break" because a% w / o% occupies 100% of the width of the screen because it is a block-like element and does not let anything stand next to it. So with div within div line breaks and plays label to bottom line. To get rid of div from within select 

form += '<label for=\"'+data[i]['cod_area_avaliar_item']+'\">'+data[i]['descricao_item']+':</label>';

EDIT

But as you are using Bootrstrap 3, the correct thing is to follow the documentation with you can see here: link

  

Add label to your div (which does not have to be a .form-inline ) for   left-aligned and inline-block controls. This only applies to forms   within viewports that are at least 768px wide.

PORTUGUESE "Add form to your <form> (which does not have to be a .form-inline ) for left and block-aligned controls." This applies only to forms in viewports that are at least 768px wide. "

But keep in mind that on screens smaller than 768px the form will always stick with the label above the other element below

EDIT2

I believe that some things are not working because they are in disagreement with the documentation, some elements need to be direct children of others etc ... But you can use the idea of form , that way you separate <form> in a form-horizontal , and select in another label This will ensure that one will stay side by side.

Another way is to put in col-xs-2 col-xs-10 as it comes below floats next to label

I made both models in the code below 

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

  
    <div id="frmNovaAvaliacao" style="overflow-y: auto; display: block;" class="modal fade in" role="dialog" aria-hidden="false">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal" onsubmit="salva_avaliacao(); return false;" style="margin-bottom:0">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel"></h3>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12" style="margin-bottom:30px;">
                            <input style="float:right; border-radius:2px" type="text" name="data_avaliacao" id="data_avaliacao" placeholder="dd/mm/yyyy"> </div>
                        <input id="cod_escola" type="hidden" name="cod_escola" value="301">
                        <input id="cod_atleta_area_avaliar" type="hidden" name="cod_atleta_area_avaliar" value="0">
                        <input id="cod_atleta" type="hidden" name="cod_atleta" value="353">
                        <!-- Montar formulario pelo JS -->
                        <div id="inputs_avaliacao_hidden"></div>
                        <div id="inputs_avaliacao">
                            <div class="col-md-12 form-group">
                                <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Aspecto Fisico</span></p>
                                <div class="col-xs-2"><label for="45">Velocidade:</label></div>
                                <div class="col-xs-10">
                                  <select style="width:65px;" class="form-control" id="item_45" name="item_45">
                                      <option value="--" disabled="" selected="">---</option>
                                      <option value="10">10</option>
                                      <option value="9">9</option>
                                      <option value="8">8</option>
                                      <option value="7">7</option>
                                      <option value="6">6</option>
                                      <option value="5">5</option>
                                      <option value="4">4</option>
                                      <option value="3">3</option>
                                      <option value="2">2</option>
                                      <option value="1">1</option>
                                  </select>
                                </div>
                                <br>
                            </div>
                            <div class="col-md-12">
                                <label for="20" style="float:left">Força:</label>
                                <select style="width:65px;" class="form-control" id="item_20" name="item_20">
                                    <option value="--" disabled="" selected="">---</option>
                                    <option value="10">10</option>
                                    <option value="9">9</option>
                                    <option value="8">8</option>
                                    <option value="7">7</option>
                                    <option value="6">6</option>
                                    <option value="5">5</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1</option>
                                </select>
                                <br>
                            </div>
                            
                            <div class="col-md-12">
                                <label for="63">Item 1:</label>
                                <select style="width:65px;" class="form-control" id="item_63" name="item_63">
                                    <option value="--" disabled="" selected="">---</option>
                                    <option value="10">10</option>
                                    <option value="9">9</option>
                                    <option value="8">8</option>
                                    <option value="7">7</option>
                                    <option value="6">6</option>
                                    <option value="5">5</option>
                                    <option value="4">4</option>
                                    <option value="3">3</option>
                                    <option value="2">2</option>
                                    <option value="1">1</option>
                                </select>
                                <br>
                            </div>
                        </div>
                        <p style="font-weight: bold;">Legenda: </p>
                        <p style="font-size:12px;"> <em>(10)</em> Excelente A - <em>(9)</em> Excelente B - <em>(8)</em> Bom A - <em>(7)</em> Bom B - <em>(6)</em> Regular A - <em>(5)</em> Regular B - <em>(4)</em> Fraco A - <em>(3)</em> Fraci B - <em>(2)</em> Péssimo A - <em>(1)</em> Péssimo B </p>
                        <div class="form-group" style="margin: 30px 0 30px 0;">
                            <p style="font-weight: bold; font-size:18px; background-color: #0D80BF; color:white;" class="text-center"><span>Relatório aprovação/reprovação</span></p>
                            <textarea class="form-control" rows="5" id="relatorio" name="relatorio"></textarea>
                        </div>
                        <br>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="treinador">Treinador</label>
                                    <input type="text" class="form-control" name="treinador" id="treinador"> </div>
                                <div class="col-md-6">
                                    <label for="preparador">Preparador Fisico</label>
                                    <input type="text" class="form-control" name="preparador" id="preparador"> </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="supervisor">Supervisor</label>
                                    <input type="text" class="form-control" name="supervisor" id="supervisor"> </div>
                                <div class="col-md-6">
                                    <label for="coordenador">Coordenador Técnico</label>
                                    <input type="text" class="form-control" name="coordenador" id="coordenador"> </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="modal-footer" style="margin-top:20%;">
                        <button id="btn_salvar_avaliacao" type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </div>
            </form>
        </div>
    
30.10.2018 / 21:04
1

Just declare the class form-inline on your form.

Result: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<br><br>
<form class="form-inline"> 
  
    <div class="form-group">
       <label for="inputPassword6">Password</label>
       <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    </div>    
    
    <div class="form-group">
        <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
    </div>
  
  <div class="form-group">
      <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Settings</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">Exemplo</option>
    <option value="2">Exemplo</option>
    <option value="3">Exemplo</option>
  </select>
  </div>
  
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Example taken from documentation .

    
30.10.2018 / 21:15
FLASK - Change goable in template How to manipulate coordinates of a html page freely