Мое поле отображается во второй строке вместо третьей строки

Question

У меня есть эта форма (первое изображение), и она имеет 3 столбца и 3 строки. Когда я меняю радиокамеру Buscar por mês до Buscar por dias Это немного меняется (второе изображение).

Formatação должен держать 2 столбца и 3 строки, но этого не происходит.

Я попытался добавить скрытый div как <div style="visibility: hidden"></div>, чтобы занять какое-то место, но я потерпел неудачу.

Мой HTML

<div class="container-fluid space-top"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="btn-group"> 
     <button class="btn btn-default toggle-dropdown just-icon" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"> 
      <span class="glyphicon glyphicon-search"></span> 
     </button> 
      <ul id="opcao-dropdown" class="dropdown-menu dropdown-menu-right"> 
       <li><a href="#">Buscar por período</a></li> 
       <li><a href="#">Buscar por mês</a></li> 
       <li><a href="#">Buscar por dias</a></li> 
      </ul> 
     </div> 
     <h3 id="titulo-periodo" class="panel-title">Tela Teste - Buscar por período</h3> 
     <h3 id="titulo-mes" class="panel-title">Tela Teste - Buscar por mês</h3> 
     <h3 id="titulo-dias" class="panel-title">Tela Teste - Buscar por dias</h3> 
    </div> 

    <div class="panel-body"> 
     <form> 
      <div id="selectDiv" class="col-sm-3"> 
       <div class="form-group row"> 
        <label for="f-option1"> 
         <input onClick="checkPeriodo()" type="radio" id="f-option1" name="selector" checked> 
         Buscar por período 
        </label> 
       </div>  
       <div class="form-group row"> 
        <label for="f-option2"> 
        <input onClick="checkMes()" type="radio" id="f-option2" name="selector"> 
        Buscar por mês</label> 
       </div>  
       <div class="form-group row"> 
        <label for="f-option3"> 
        <input onClick="checkDias()" type="radio" id="f-option3" name="selector"> 
        Buscar por dias</label> 
       </div> 
      </div> 

      <div class="col-sm-4"> 
       <div class="form-group row"> 
        <div id="buscar-periodo-inicial"> 
         <label for="periodo-inicial" class="control-label">Data Inicial:</label> 
         <div class="form-inline"> 
          <input type="date" class="form-control" name="bday"> 
         </div> 
        </div> 

        <div id="buscar-mes-inicial"> 
         <label for="periodo" class="control-label">Mês inicial:</label> 
         <div class="form-inline"> 
          <select class="form-control" id="sel1"> 
           <option>Fevereiro</option> 
           <option>Dezembro</option> 
           <option>Janeiro</option> 
           <option>Julho</option> 
          </select> 

          <select class="form-control" id="sel1"> 
           <option>2016</option> 
           <option>2015</option> 
           <option>2014</option> 
           <option>2013</option> 
          </select> 
         </div> 
        </div> 

        <div id="buscar-dias" class="btn-toolbar"> 
         <label for="inputEmail3" data-toggle="tooltip" class="control-label" title="A partir do dia atual">Últimos dias:</label> 
         <div class="btn-group" role="group" data-toggle="buttons"> 
          <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option5">10</label> 
          <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option6">30</label> 
          <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option7">60</label> 
          <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option8">90</label> 
         </div> 
        </div> 
       </div> 
       <div class="form-group row"> 
        <div id="buscar-mes-final"> 
         <label for="periodo" class="control-label">Mês final:</label> 
         <div class="form-inline"> 
          <select class="form-control" id="sel1"> 
           <option>Dezembro</option> 
           <option>Dezembro</option> 
           <option>Janeiro</option> 
           <option>Julho</option> 
          </select> 

          <select class="form-control" id="sel1"> 
           <option>2016</option> 
           <option>2015</option> 
           <option>2014</option> 
           <option>2013</option> 
          </select> 
         </div> 
        </div> 

        <div id="buscar-periodo-final"> 
         <label for="periodo-final" class="col-form-label">Data Final:</label> 
         <div class="form-inline"> 
          <input type="date" class="form-control" name="bday"> 
         </div> 
        </div> 


       </div> 
       <div class="form-group row"> 
        <div id="buscar-periodo-intervalos"> 
         <label class="control-label" data-toggle="tooltip" title="Escolha até 5 intervalos de tempo em minutos para a consulta">Intervalos:</label> 
         <div class="form-inline"> 
          <select class="form-control" id="sel1"> 
           <option>0</option> 
           <option>1</option> 
          </select> 
          <select class="form-control" id="sel1"> 
           <option>0</option> 
           <option>1</option> 
          </select> 
          <select class="form-control" id="sel1"> 
           <option>0</option> 
           <option>1</option> 
          </select> 
          <select class="form-control" id="sel1"> 
           <option>0</option> 
           <option>1</option> 
          </select> 
          <select class="form-control" id="sel1"> 
           <option>0</option> 
           <option>1</option> 
          </select> 
         </div> 
        </div> 
        <div id="buscar-mes-formatacao"> 
         <label for="inputEmail3" data-toggle="tooltip" class="col-form-label" title="Exibir gráficos em três formatos diferentes">Formatação:</label> 
         <div class="form-inline"> 
          <select class="form-control" id="sel1"> 
           <option>Porcentagem</option> 
           <option>Percentil</option> 
           <option>Média</option> 
          </select> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="col-sm-5"> 
       <div class="form-group row"> 
        <div id="buscar-veiculo"> 
         <label for="inputEmail2" class="col-form-label">Veículo:</label> 
         <div class="form-inline"> 
          <select class="form-control" id="sel1"> 
           <option>Locomotiva</option> 
           <option>Trem</option> 
          </select> 
         </div> 
        </div> 
       </div> 
       <div class="form-group row"> 
        <div id="buscar-dias-espaco"></div> 
        <label for="inputEmail3" class="col-form-label">Posto:</label> 
         <div class="form-inline"> 
          <select class="form-control" id="sel1"> 
           <option>Azul</option> 
           <option>Vermelho</option> 
           <option>Verde</option> 
           <option>Branco</option> 
          </select> 
         </div> 
        </div> 
       <div class="form-group row"> 
        <button type="submit" class="btn btn-default">Consultar</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

Fiddle https://jsfiddle.net/marquesm91/jkk034qj/1/

Answer 1

Вот codepen

Добавьте этот код в стили CSS

.space { 
    margin-top: 35px; 
} 

и этот JS код

$('#buscar-mes-formatacao').addClass('space'); 

к (это 44 код строки) $('#f-option3').on('click', function()

И не забудьте удалить класс пространство от варианта 1 и 2 путем добавления

$('#buscar-mes-formatacao').removeClass('space'); 

соответственно к $('#f-option1') и $('#f-option2')

Это может быть не самым лучшим вариантом, но он решает проблему

Answer 2

$('#f-option1').on('click', function(){ 
 
\t \t $('#titulo-periodo').show(); 
 
    $('#buscar-periodo-inicial').show(); 
 
    $('#buscar-periodo-final').show(); 
 
    $('#buscar-periodo-intervalos').show(); 
 
    
 
    $('#titulo-mes').hide(); 
 
    $('#buscar-mes-inicial').hide(); 
 
    $('#row-final').show(); 
 
    $('#buscar-mes-final').hide(); 
 
    $('#buscar-mes-formatacao').hide(); 
 
    $('#buscar-veiculo').show(); 
 
    
 
    $('#titulo-dias').hide(); 
 
    $('#buscar-dias').hide(); 
 
    $('#botao-consulta-dias').hide(); 
 
    $('#buscar-dias-espaco').hide(); 
 
    $('#buscar-dias-veiculo').hide(); 
 

 
}); 
 

 
$('#f-option2').on('click', function(){ 
 
\t \t $('#titulo-periodo').hide(); 
 
    $('#buscar-periodo-inicial').hide(); 
 
    $('#buscar-periodo-final').hide(); 
 
    $('#buscar-periodo-intervalos').hide(); 
 

 
    $('#titulo-mes').show(); 
 
    $('#buscar-mes-inicial').show(); 
 
    $('#row-final').show(); 
 
    $('#buscar-mes-final').show(); 
 
    $('#buscar-mes-formatacao').show(); 
 
    $('#buscar-veiculo').show(); 
 

 
    $('#titulo-dias').hide(); 
 
    $('#buscar-dias').hide(); 
 
    $('#botao-consulta-dias').hide(); 
 
    $('#buscar-dias-espaco').hide(); 
 
    $('#buscar-dias-veiculo').hide(); 
 

 
}); 
 
$('#f-option3').on('click', function(){ 
 
\t \t $('#titulo-periodo').hide(); 
 
    $('#buscar-periodo-inicial').hide(); 
 
    $('#buscar-periodo-final').hide(); 
 
    $('#buscar-periodo-intervalos').hide(); 
 
    
 
    $('#titulo-mes').hide(); 
 
    $('#buscar-mes-inicial').hide(); 
 
    $('#row-final').hide(); 
 
    $('#buscar-mes-final').hide(); 
 
    $('#buscar-mes-formatacao').show(); 
 
    $('#buscar-veiculo').show(); 
 

 
    $('#titulo-dias').show(); 
 
    $('#buscar-dias').show(); 
 
    $('#botao-consulta-dias').show(); 
 
    $('#buscar-dias-espaco').show(); 
 
    $('#buscar-dias-veiculo').show(); 
 

 
}); 
 
    
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
    
 
    $('#titulo-mes').hide(); 
 
    $('#buscar-mes-inicial').hide(); 
 
    $('#buscar-mes-final').hide(); 
 
    $('#buscar-mes-formatacao').hide(); 
 

 
    $('#titulo-periodo').show(); 
 
    $('#buscar-periodo-inicial').show(); 
 
    $('#buscar-periodo-final').show(); 
 
    $('#buscar-periodo-intervalos').show(); 
 
    
 
    $('#titulo-dias').hide(); 
 
    $('#buscar-dias').hide(); 
 
    $('#botao-consulta-dias').hide(); 
 
    
 
    $('#opcao-dropdown li').on('click', function(){ 
 
     var option = $(this).text(); 
 
     
 
     if(option === "Buscar por período") { 
 
      $('#titulo-periodo').show(); 
 
      $('#buscar-periodo-inicial').show(); 
 
      $('#buscar-periodo-final').show(); 
 
      $('#buscar-periodo-intervalos').show(); 
 

 
      $('#titulo-mes').hide(); 
 
      $('#buscar-mes-inicial').hide(); 
 
      $('#buscar-mes-final').hide(); 
 
      $('#buscar-mes-formatacao').hide(); 
 
      $('#buscar-veiculo').show(); 
 

 
      $('#titulo-dias').hide(); 
 
      $('#buscar-dias').hide(); 
 
      $('#botao-consulta-dias').hide(); 
 
      $('#buscar-dias-espaco').hide(); 
 
      $('#buscar-dias-veiculo').hide(); 
 
     } 
 
     else if (option === "Buscar por mês") { 
 
      $('#titulo-periodo').hide(); 
 
      $('#buscar-periodo-inicial').hide(); 
 
      $('#buscar-periodo-final').hide(); 
 
      $('#buscar-periodo-intervalos').hide(); 
 

 
      $('#titulo-mes').show(); 
 
      $('#buscar-mes-inicial').show(); 
 
      $('#buscar-mes-final').show(); 
 
      $('#buscar-mes-formatacao').show(); 
 
      $('#buscar-veiculo').show(); 
 

 
      $('#titulo-dias').hide(); 
 
      $('#buscar-dias').hide(); 
 
      $('#botao-consulta-dias').hide(); 
 
      $('#buscar-dias-espaco').hide(); 
 
      $('#buscar-dias-veiculo').hide(); 
 
      
 
     } 
 
     else if (option === "Buscar por dias") { 
 
      $('#titulo-periodo').hide(); 
 
      $('#buscar-periodo-inicial').hide(); 
 
      $('#buscar-periodo-final').hide(); 
 
      $('#buscar-periodo-intervalos').hide(); 
 

 
      $('#titulo-mes').hide(); 
 
      $('#buscar-mes-inicial').hide(); 
 
      $('#buscar-mes-final').hide(); 
 
      $('#buscar-mes-formatacao').show(); 
 
      $('#buscar-veiculo').show(); 
 

 
      $('#titulo-dias').show(); 
 
      $('#buscar-dias').show(); 
 
      $('#botao-consulta-dias').show(); 
 
      $('#buscar-dias-espaco').show(); 
 
      $('#buscar-dias-veiculo').show(); 
 
     } 
 
    }); 
 
    
 
    if($('input[name="selector"]').is(':checked')){ 
 
     $('input[name="selector"]:checked').trigger('click'); 
 
    }

.form-control { 
 
    padding-left: 5px; 
 
} 
 

 

 

 
label { 
 
    /* Other styling.. */ 
 
    text-align: right; 
 
    
 
    float:left; 
 
    margin-right: 15px; 
 
} 
 

 
label[for=buttons] { 
 
    /* Other styling.. */ 
 
    margin-right: 0px; 
 
} 
 

 
.space-top { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
.container { 
 
    background-color: #eee; 
 
} 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
label { 
 
    padding-top: 6px; 
 
    white-space: nowrap; 
 
} 
 

 
.panel-heading .btn-group { 
 
    float: right; 
 
} 
 

 
.btn-group-horizontal .btn { 
 
display: inline !important; 
 
} 
 

 
.panel-heading { 
 
    padding-right: 15px; 
 
} 
 

 
.just-icon { 
 
    padding: 0; 
 
    border: none; 
 
    background: none; 
 
    background-color: #fff; 
 
} 
 

 
.toggle-dropdown, 
 
.toggle-dropdown:hover, 
 
.toggle-dropdown:focus { 
 
    border-color: #fff; 
 
    background-color: #fff; 
 
    /*color: #357ebd;*/ 
 
    outline: none !important; 
 
} 
 

 
.glyphicon-search { 
 
    font-size: 150%; 
 
} 
 

 
.btn-default { 
 
    outline: none !important; 
 
    
 
} 
 

 
.btn-group btn btn-default:focus { 
 
    background-color: black; 
 
} 
 

 
.btn:active, 
 
.btn.active { 
 
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); 
 
      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); 
 
} 
 

 
.padd-left1 { 
 
    margin-left:-0.4%; 
 
} 
 

 
.padd-left2 { 
 
    margin-left:-0.6%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid space-top"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <div class="btn-group"> 
 
      <button class="btn btn-default toggle-dropdown just-icon" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"> 
 
       <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
       <ul id="opcao-dropdown" class="dropdown-menu dropdown-menu-right"> 
 
        <li><a href="#">Buscar por período</a></li> 
 
        <li><a href="#">Buscar por mês</a></li> 
 
        <li><a href="#">Buscar por dias</a></li> 
 
       </ul> 
 
      </div> 
 
      <h3 id="titulo-periodo" class="panel-title">Tela Teste - Buscar por período</h3> 
 
      <h3 id="titulo-mes" class="panel-title">Tela Teste - Buscar por mês</h3> 
 
      <h3 id="titulo-dias" class="panel-title">Tela Teste - Buscar por dias</h3> 
 
     </div> 
 

 
     <div class="panel-body"> 
 
      <form> 
 
       <div id="selectDiv" class="col-sm-3"> 
 
        <div class="form-group row"> 
 
         <label for="f-option1"> 
 
          <input type="radio" id="f-option1" name="selector" checked> 
 
          Buscar por período 
 
         </label> 
 
        </div>  
 
        <div class="form-group row"> 
 
         <label for="f-option2"> 
 
         <input type="radio" id="f-option2" name="selector"> 
 
         Buscar por mês</label> 
 
        </div>  
 
        <div class="form-group row"> 
 
         <label for="f-option3"> 
 
         <input type="radio" id="f-option3" name="selector"> 
 
         Buscar por dias</label> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="col-sm-4"> 
 
        <div class="form-group row"> 
 
         <div id="buscar-periodo-inicial"> 
 
          <label for="periodo-inicial" class="control-label">Data Inicial:</label> 
 
          <div class="form-inline"> 
 
           <input type="date" class="form-control" name="bday"> 
 
          </div> 
 
         </div> 
 
         
 
         <div id="buscar-mes-inicial"> 
 
          <label for="periodo" class="control-label">Mês inicial:</label> 
 
          <div class="form-inline"> 
 
           <select class="form-control" id="sel1"> 
 
            <option>Fevereiro</option> 
 
            <option>Dezembro</option> 
 
            <option>Janeiro</option> 
 
            <option>Julho</option> 
 
           </select> 
 

 
           <select class="form-control" id="sel1"> 
 
            <option>2016</option> 
 
            <option>2015</option> 
 
            <option>2014</option> 
 
            <option>2013</option> 
 
           </select> 
 
          </div> 
 
         </div> 
 
         
 
         <div id="buscar-dias" class="btn-toolbar"> 
 
          <label for="inputEmail3" data-toggle="tooltip" class="control-label" title="A partir do dia atual">Últimos dias:</label> 
 
          <div class="btn-group" role="group" data-toggle="buttons"> 
 
           <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option5">10</label> 
 
           <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option6">30</label> 
 
           <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option7">60</label> 
 
           <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option8">90</label> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="form-group row" id="row-final"> 
 
         <div id="buscar-mes-final"> 
 
          <label for="periodo" class="control-label">Mês final:</label> 
 
          <div class="form-inline"> 
 
           <select class="form-control" id="sel1"> 
 
            <option>Dezembro</option> 
 
            <option>Dezembro</option> 
 
            <option>Janeiro</option> 
 
            <option>Julho</option> 
 
           </select> 
 

 
           <select class="form-control" id="sel1"> 
 
            <option>2016</option> 
 
            <option>2015</option> 
 
            <option>2014</option> 
 
            <option>2013</option> 
 
           </select> 
 
          </div> 
 
         </div> 
 

 
         <div id="buscar-periodo-final"> 
 
          <label for="periodo-final" class="col-form-label">Data Final:</label> 
 
          <div class="form-inline"> 
 
           <input type="date" class="form-control" name="bday"> 
 
          </div> 
 
         </div> 
 
         
 
         
 
        </div> 
 
        <div class="form-group row"> 
 
         <div id="buscar-periodo-intervalos"> 
 
          <label class="control-label" data-toggle="tooltip" title="Escolha até 5 intervalos de tempo em minutos para a consulta">Intervalos:</label> 
 
          <div class="form-inline"> 
 
           <select class="form-control" id="sel1"> 
 
            <option>0</option> 
 
            <option>1</option> 
 
           </select> 
 
           <select class="form-control" id="sel1"> 
 
            <option>0</option> 
 
            <option>1</option> 
 
           </select> 
 
           <select class="form-control" id="sel1"> 
 
            <option>0</option> 
 
            <option>1</option> 
 
           </select> 
 
           <select class="form-control" id="sel1"> 
 
            <option>0</option> 
 
            <option>1</option> 
 
           </select> 
 
           <select class="form-control" id="sel1"> 
 
            <option>0</option> 
 
            <option>1</option> 
 
           </select> 
 
          </div> 
 
         </div> 
 
         <div id="buscar-mes-formatacao"> 
 
          <label for="inputEmail3" data-toggle="tooltip" class="col-form-label" title="Exibir gráficos em três formatos diferentes">Formatação:</label> 
 
          <div class="form-inline"> 
 
           <select class="form-control" id="sel1"> 
 
            <option>Porcentagem</option> 
 
            <option>Percentil</option> 
 
            <option>Média</option> 
 
           </select> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="col-sm-5"> 
 
        <div class="form-group row"> 
 
         <div id="buscar-veiculo"> 
 
          <label for="inputEmail2" class="col-form-label">Veículo:</label> 
 
          <div class="form-inline"> 
 
           <select class="form-control" id="sel1"> 
 
            <option>Locomotiva</option> 
 
            <option>Trem</option> 
 
           </select> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="form-group row"> 
 
         <div id="buscar-dias-espaco"></div> 
 
         <label for="inputEmail3" class="col-form-label">Posto:</label> 
 
          <div class="form-inline"> 
 
           <select class="form-control" id="sel1"> 
 
            <option>Azul</option> 
 
            <option>Vermelho</option> 
 
            <option>Verde</option> 
 
            <option>Branco</option> 
 
           </select> 
 
          </div> 
 
         </div> 
 
        <div class="form-group row"> 
 
         <button type="submit" class="btn btn-default">Consultar</button> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>