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">×</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:
Depois de abrir e clico no select para escolher uma das opções, como mostro:
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:
Não estou a perceber o problema, podem ajudar?
$('body').css('overflow','scroll');
no script do modal só para testar$(document).ready(function() { $('.modal').css('overflow-y','visible'); $('body').css('overflow','scroll');});
e agora está a funcionar