Good afternoon! I'm having trouble rendering a modal window using Thymeleaf. The purpose of Modal is simply to display a form with the details of the Service, without having to redirect the user to another page. The data is loaded correctly. The problem is in the alignment of the elements of the form, which are all messed up in the resolution of a common monitor, and in the phone / tablet everything is aligned perfectly.
Below is the code for my modal.
<!-- Modal Visualizar -->
<div class="modal fade" id="view-modal" th:id="${atendimento.id}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" >
<div class="modal-dialog modal-lg" role="dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabel">Detalhes do Atendimento</h4>
</div>
<div class="modal-body">
<form role="form" th:object="${atendimento}" th:id="${atendimento.id}">
<fieldset>
<div class="panel panel-primary">
<div class="panel-heading">Atendimento</div>
<div class="panel-body">
<!-- ==== CLIENTE ==== -->
<!-- Razão Social -->
<div class="form-group">
<label for="razaoSocial" class="form-control-label">Razão Social</label>
<input id="razaoSocial" name="razaoSocial" type="text" th:value="${atendimento.cliente.razaoSocial}" readonly="readonly" class="form-control">
</div>
<div class="form-group">
<label for="codigo" class=form-control-label">Código *</label>
<input id="codigo" name="cliente" th:value="${atendimento.cliente.id}" class="form-control" type="text" readonly="readonly">
</div>
<div class="form-group">
<label for="status" class="form-control-label">Status</label>
<input id="status" class="form-control" th:value="${atendimento.cliente.status}" readonly="readonly" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="telefone">Telefone *</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input id="telefone" name="telefone" class="form-control" readonly="readonly" th:value="${atendimento.cliente.telefone}" type="text" maxlength="12">
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="celular">Celular</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input id="celular" name="celular" class="form-control input-md" readonly="readonly" th:value="${atendimento.cliente.celular}" type="text" maxlength="13">
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="email">Email *</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input id="email" name="email" class="form-control" readonly="readonly" th:value="${atendimento.cliente.email}" type="text">
</div>
</div>
<!-- ==== /. CLIENTE ====-->
<hr size="30">
<div class="form-group" >
<label for="id" class="form-control-label">Código de Atendimento*</label>
<input id="id" name="id" th:value="${atendimento.id}" class="form-control" readonly="readonly" type="text">
</div>
<div class="form-group">
<div class="selectContainer" >
<select class="form-control" name="tipoAtendimento" disabled>
<option selected th:value="${atendimento.tipoAtendimento}" th:text="${atendimento.tipoAtendimento}"></option>
</select>
</div>
</div>
<div class="form-group">
<div class="selectContainer">
<select class="form-control" name="modulo" disabled>
<option selected th:value="${atendimento.modulo}" th:text="${atendimento.modulo}"></option>
</select>
</div>
</div>
<div class="form-group">
<label for="descricao" class="form-control-label">Descrição *</label>
<input id="descricao" name="descricao" th:value="${atendimento.descricao}" class="form-control" placeholder="Descrição do Atendimento" type="text" readonly="readonly">
</div>
<div class="form-group">
<div class="input-group date" id='datetimepicker'>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<input type="text" id="dataAtendimento" name="dataAtendimento" class="form-control" th:value="${#dates.format(atendimento.dataAtendimento, 'dd/MM/yyyy')}" readonly="readonly">
</div>
</div>
<div class="form-group">
<label for="admUser" class="form-control-label">Nome do usuário que solicitou suporte *</label>
<input id="admUser" name="admUser" th:value="${atendimento.admUser}" class="form-control input-md" readonly="readonly" type="text">
</div>
<div class="form-group">
<label for="operador" class="form-control-label">Operador*</label>
<input id="operador" name="operador" readonly th:value="${userName}" readonly="readonly" class="form-control" required type="text">
</div>
<div class="form-group" >
<label for="solucao" class="col-md-2 control-label">Solução *</label>
<div class="col-md-8">
<textarea id="solucao" name="solucao" th:text="${atendimento.solucao}" readonly="readonly" class="form-control" cols="70" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label for="observacao" class="col-md-2 control-label">Observação *</label>
<div class="col-md-8">
<textarea id="observacao" name="observacao" th:text="${atendimento.observacao}" readonly="readonly" required class="form-control" cols="70" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label for="statusAtendimento" class="form-control-label">Status *</label>
<div class="selectContainer">
<select class="form-control" id="statusAtendimento" name="statusAtendimento" disabled>
<option th:value="${atendimento.statusAtendimento}" th:text="${atendimento.statusAtendimento}"></option>
</select>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- /.Modal Visualizar -->