Problem to access modal-footer in modal

Question

I have the following modal with the following form inside and 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>

When I use the modal in the computer, I have no problem, it works well. When I use the form on my mobile phone I no longer have access to the buttons inside the modal-footer. I show in picture

When I open the modal, I can access the whole modal:

After opening and clicking select to choose one of the options, as shown:

I no longer have access to the buttons inside the footer, I can neither cancel nor save in the database, as shown in the image:

I don’t understand the problem, you can help?

Answer 1

Probably when the modal opens is placed a overflow:hidden in the body, then when the modal increases content the buttons of the footer end up getting off the screen.

When the modal opens the class is placed .modal-open in the body, leaving him with overflow:hidden

One of the options to fix this is to not block the overflow of body when you activate the modal. for this use the following code

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

But the ideal is that you use the events of the modal itself to add these properties https://getbootstrap.com/docs/4.0/components/modal/#methods

The right thing would be

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

And when I close the modal

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