0

Tenho o seguinte modal com o seguinte formulário dentro e css.

$(document).ready(function() {
  $('.modal').css('overflow-y','visible');
});
.container {
  max-width: auto;
  margin: 0 auto;
  overflow-y: auto;
}
.container * {
  box-sizing: border-box;
}
.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
  LINE-HEIGHT:20px;
}
.flex-outer {
  max-width: 100%;
  margin: 0 auto;
  
}
.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
  LINE-HEIGHT:20px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.flex-outer li1 label,
.flex-outer li1 p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
  LINE-HEIGHT:20px;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}
.flex-outer > li1 > label,
.flex-outer li1 p {
  flex: 1 0 120px;

}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
  
}
.flex-outer > li1 > label + *,
.flex-inner {
  flex: 1 0 220px;
}
.flex-outer li p {
  margin: 0;
}
.flex-outer li1 p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  LINE-HEIGHT:20px;
}
.flex-outer li1 input:not([type='checkbox']),
.flex-outer li1 textarea {
  padding: 15px;
  LINE-HEIGHT:20px;
}
.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}
.flex-outer li1 button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;

}
.flex-inner li {
  width: 100%;
}
.flex-inner li1 {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="add_data_Modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
	      <button type="button" class="close close1" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
        </button>
       <h4 class="modal-title" id="exampleModalLabel">REQUISIÇÃO DE MANUTENÇÃO</h4>
     </div>
     <div class="modal-header">
	      <button class="btn btn-primary view_data" data-toggle="modal" data-target="#dataModal">Consulta</button>
	   </div>
     <div class="modal-body">	
     <form class="form4" method="POST">
       <ul class="flex-outer">
         <li class="form-group">
          <label for="Pedido">Requerente</label>
           <select class="form-control" id="Pedido" name="Pedido" required="">
			   <?php        
               $sql = "SELECT * FROM raddb.Valencias WHERE Id IN ('3') ORDER BY Destino ASC";
               $qr = mysqli_query($conn, $sql);
               while($ln = mysqli_fetch_assoc($qr)){
               echo '<option value="'.$ln['Id'].'">'.$ln['Destino'].'</option>';
               }
               ?>      
           </select>
         </li>
	       <li>
          <label for="Assunto">Assunto</label>
           <input type="text" class="form-control" id="Assunto" name="Assunto">
         </li>
         <li>
           <label for="Descricao">Descrição da Anomalia</label>
             <textarea rows="6" id="Descricao" placeholder="Digite o motivo da requisição"></textarea>
         </li>
        </ul>
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn1" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-success" id="mensagem-sucesso" onclick="inserir_registo()">Gravar</button>
      </div>  
    </div>  
  </div>
</div>

Quando utilizo o modal no computador, não tenho problema, funciona bem. Quando utilizo o formulário no telemóvel deixo de ter acesso aos botões dentro do modal-footer. Mostro em imagem

Quando abro o modal, consigo ter acesso a todo o modal: inserir a descrição da imagem aqui

Depois de abrir e clico no select para escolher uma das opções, como mostro: inserir a descrição da imagem aqui

Deixo de ter acesso aos botões que estão dentro do footer, nem consigo cancelar nem gravar na base de dados, como mostro na imagem: inserir a descrição da imagem aqui

Não estou a perceber o problema, podem ajudar?

5
  • O que vc está falando é que quando adiciona informações no modal ele cresce e os botões do footer acabam ficando para fora da tela e vc não consegue mais clicar neles é isso?
    – hugocsl
    5/03/2020 às 12:37
  • @hugocsl, sim é isso. Devia fazer scroll, até ao final do footer, mas não faz. Mas antes de adicionar informação ele também fica fora da tela, mas aí faz scroll, depois de adicionar informação num campo não consigo mais clicar neles
    – Bruno
    5/03/2020 às 12:55
  • Tenta colocar assim: $('body').css('overflow','scroll'); no script do modal só para testar
    – hugocsl
    5/03/2020 às 13:06
  • @hugocsl resolveu o problema. Coloquei assim $(document).ready(function() { $('.modal').css('overflow-y','visible'); $('body').css('overflow','scroll');}); e agora está a funcionar
    – Bruno
    5/03/2020 às 13:10
  • Legal Junior vou postar como resposta
    – hugocsl
    5/03/2020 às 13:32

1 Resposta 1

1

Provavelmente quando o modal abre é colocado um overflow:hidden no body, então quando o modal aumenta de conteúdo os botões do footer acabam ficando para fora da tela.

Quando o modal abre é colocada a classe .modal-open no body, deixando ele com overflow:hidden

inserir a descrição da imagem aqui

Uma das opções para corrigir isso é não bloquear o overflow do body quando vc ativar o modal. para isso use o seguinte código

$(document).ready(function() {
  $('.modal').css('overflow-y','visible');
  $('body').css('overflow-y','auto'); //coloque o overflow-y do body como auto
});

Mas o ideal é que vc use os eventos do próprio modal para adicionar essas propriedades https://getbootstrap.com/docs/4.0/components/modal/#methods

O correto mesmo seria

$('#myModal').modal('show') { // myModal é o ID do modal
  $('body').css('overflow','scroll'); // coloque scroll no body 
});

E quando fechar o modal

$('#myModal').modal('hide') { // myModal é o ID do modal
  $('body').css('overflow','auto'); // volta o overflow pro default
});

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .