Formulário no Fluig Modal

Bom dia!

Criei um fluig modal, porém ao abrir não aparece todos os campos do formulário, somente quando é diminuido o zoom do navegador.

Tem algo que possa ser feito para que apareça todos os campos ou tenha uma barra de rolagem?

Obrigada :)

Sem zoom 0.jpg

Com zoom 1.JPG

            var myModal = FLUIGC.modal({
                title: 'Solicitação de Serviço',
                content: '<html>' +
                         '<head>' + 
                         '<link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>' +
                         '<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>' + 
                         '<script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>' + 
                         '<script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>' + 
                         '<script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>' +
                         '</head>' + 
                         '<body>' +
                         '<div class="fluig-style-guide">' +
                         '<form name="form" role="form">' +
                         '<div class="form-group col-md-12">' +
                         '<div class="row" style="background:#4F4F4F; text-align:center">' +
                         '<h1><font color="#FFFFFF"><b><span class="fluigicon fluigicon-system-tools fluigicon-md"></span> Solicitação de Serviço </b></font></h1>' +
                         '</div>' +
                         '</div>' +

                         '<div class="row"></div>' +

                         '<div class="panel panel-primary">' +
                         '<div class="panel-heading">' +
                         '<h3 class="panel-title">Informações</h3>' +
                         '</div>' +
                         '<div class="panel-body">' +
                         '<div class="row">' +
                                '<div class="form-group col-md-3">' +
                                    '<label for="txtUnidade">Unidade:</label> <label for="txtNomeUnidade">Teste</label>' +    
                                    '</div>' +
                                '</div>' +
                         '<div class="row">' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtBem">Bem/Localiz.:</label>' +
                                    '<input type="text" name="codbem" id="codbem" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-4">' +
                                    '<label for="txtDescBem">Desc.Bem/Loc:</label>' +  
                                    '<input type="text" name="nombem" id="nombem" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtCC">Centro Custo:</label>' +  
                                    '<input type="text" name="ccusto" id="ccusto" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-4">' +
                                    '<label for="txtDescCC">Nome C.Custo:</label>' +  
                                    '<input type="text" name="nomcus" id="nomcus" class="form-control" readonly="readonly">' +
                                '</div>' +
                            '</div>' +
                            '<div class="row">' +
                                '<div class="form-group col-md-3">' +
                                    '<label for="txtDtAbert">Dt.Abertura:</label>' +  
                                    '<div class="input-group">' +
                                        '<input type="date" name="dataAbert" id="dataAbert" class="form-control" readonly="readonly">' +
                                        '<div class="input-group-addon" data-show-calendar>' +
                                            '<span class="fluigicon fluigicon-calendar"></span>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtHrAbert">Hr.Abertura:</label>' +  
                                    '<input type="time" name="horaAbert" id="horaAbert" class="form-control" readonly="readonly">' +
                                '</div>' +
                                '<div class="form-group col-md-2">' +
                                    '<label for="txtRamal">Ramal:</label>' +  
                                    '<input type="text" name="ramal" id="ramal" class="form-control">' +
                                '</div>' +
                                '<div class="form-group col-md-5">' +
                                    '<label for="txtSituacao">Situacao S.S:</label>' +  
                                    '<input type="text" name="soluca" id="soluca" class="form-control" readonly="readonly">' +
                                '</div>' +
                            '</div>' +
                            '<div class="row">' +
                                '<div class="form-group col-md-12">' +
                                    '<label for="txtServico">Serviço:</label>' +  
                                    '<div class="input-group">' +
                                        '<textarea id="servico" name="servico" rows="5" cols="150" maxlength="300"></textarea>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +    
                        '</div>' +
                     '</div>' +
                     '<div class="panel panel-primary">' +
                         '<div class="panel-heading">' +
                             '<h3 class="panel-title">Solicitante</h3>' +
                         '</div>' +
                         '<div class="panel-body">' +
                             '<div class="row">' +
                                 '<div class="form-group col-md-3">' +
                                     '<label for="txtSolicitante">Solicitante:</label>' +  
                                     '<input type="text" name="cdsoli" id="cdsoli" class="form-control" readonly="readonly">' +
                                 '</div>' + 
                                 '<div class="form-group col-md-3">' +
                                     '<label for="txtNomeSolic">Nome Solicit:</label>' +  
                                     '<input type="text" name="nmsoli" id="nmsoli" class="form-control" readonly="readonly">' +
                                 '</div>' + 
                                 '<div class="form-group col-md-6">' +
                                     '<label for="txtEmail">Email:</label>' +  
                                     '<input type="text" name="emsoli" id="emsoli" class="form-control" readonly="readonly">' +
                                 '</div>' + 
                             '</div>' +
                         '</div>' +
                     '</div>' +

                     '</form>' +
                     '</div>' +
                     '</body>' +
                     '</html>',
                id: 'fluig-modal',
                size: 'large',
                actions: [{
                    'label': 'Save',
                    'bind': 'data-open-modal',
                },{
                    'label': 'Close',
                    'autoClose': true
                }]

            });
compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags fluig modal ou faça a sua própria pergunta.