0

Boa tarde! Estou tendo problemas ao renderizar uma janela modal usando Thymeleaf. A finalidade da Modal é simplesmente mostrar um form com os detalhes do Atendimento, sem que precise redirecionar o usuário para outra página. Os dados são carregados corretamente. O problema está no alinhamento dos elementos do formulário, que ficam todos bagunçados na resolução de um monitor comum e, no celular/tablet fica tudo alinhado direitinho.

Abaixo segue o código da minha 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">&times;</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 -->     
2
  • Adicione ao teu form a seguinte class: "form-horizontal". Commented 26/07/2017 às 12:28
  • @MurilloGoulart então cara, eu já testei com essa classe também e não funciona. O engraçado é que se eu abrir só essa página no navegador, sem o servidor rodando e tal, só o frontend... Ela fica perfeita, o formulário fica normal!!! O problema acontece quando ela é processada pelo thymeleaf =/ Commented 27/07/2017 às 19:36

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .