marquesm91 marquesm91 - 28 days ago 4
CSS Question

My field is displayed on second row instead of third row

I have this form (first image) and it has 3 columns and 3 rows. When I change the radiobutton Buscar por mês to Buscar por dias It changes a little bit (second image).

enter image description here

Formatação needs to keep on 2 column and 3 row but it doesn't happen.

I have tried to add a hidden div like

<div style="visibility: hidden"></div>
to occupy some space but I failed.

enter image description here

My 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

Here is a codepen

Add this code to CSS styles

.space {
  margin-top: 35px;
}

and this JS code

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

to (it is 44 code row) $('#f-option3').on('click', function()

And do not forget to remove class space from option 1 and 2 by adding

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

respectively to $('#f-option1') and $('#f-option2')

This may be not the best option, but it solves the problem