Versão atual:

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
                }]

            });

Versão (1):

Ver a versão formatada

Formulário no Fluig Modal

  • criado 18 de Oct de 2018

Comentário

new question