Проблема:
При необходимости таблица на странице получает переполнение.
Когда я нажимаю «активы» и «добавить активы», появляется модал, где Я могу добавить «Актив». Модал перекрывает все элементы тела, кроме полосы прокрутки таблицы.
Как видно на изображении на входе «Идентификатор GPS-трекера» "есть полоса прокрутки.
Я использую Материализация модалов и Таблица материализации для этого проекта.
Вопрос:
Как я могу перекрыть полосу прокрутки?
Код:
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
// var options =
var instances = M.Dropdown.init(elems, {coverTrigger: false});
});
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
html, body {
margin: 0;
height: 100%;
}
#map{
height:100%;
width: 100%;
}
nav{
background-color:#1A9988 !important;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
position: absolute !important;
bottom: 23px;
right: 20px;
width: 200px;
}
#form_btn{
float: none;
clear: both;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
margin-bottom: 0 !important;
}
/* Add styles to the form container */
.form-popup{
max-width: 400px;
min-width: 300px;
width: 25%;
}
/*form box*/
.form-container {
padding: 20px !important;
background-color: white;
}
.login{
color: #1A9988;
display: inline;
font-size: 30px;
}
.Sign-up, .Sign-up:visited{
cursor: pointer;
font-size: 24px;
color: #1A9988;
text-decoration: underline;
float: none !important;
clear: both;
}
#form_full{
background-color: white;
width: 100%;
height: 60%;
position: absolute;
top: 20%;
left: 20%;
opacity: 0.9;
}
#Sign-up{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 10%;
position: absolute;
right: 50%;
border-radius: 10px;
}
.not-a-user{
font-size: 24px;
color: #707070;
}
.Cancel{
font-size: 35px;
color: #707070;
}
.Sign-up_Cancel{
font-size: 35px;
color: #1A9988;
text-decoration: underline;
}
#row_link{
margin-left: 0;
}
.alert {
position: absolute;
width: 100%;
top: 5%;
padding: 15px;
background-color: #f44336;
color: white;
text-align: center;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
#login_alert{
top: 0;
}
/*table with gps trackers*/
.Assets{
width: calc(100% - 100px);
margin: 0px 50px 0px 50px;
}
.link{
color: #1a9988;
}
.link:hover{
color: #0f7567;
}
/*popup add assets style*/
/* The Modal (background) */
.add_assets {
left: 0;
top: 10%;
width: 100%; /* Full width */
height: 55%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
#submit{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 20%;
position: absolute;
right:30px;
border-radius: 10px;
}
#Cancel_add{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 20%;
position: absolute;
left:30px;
border-radius: 10px;
background-color: #f44336;
}
.animate {
-webkit-animation: animatezoom 5s;
animation: animatezoom 5s
background-color: #fefefe;
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
@media only screen and (max-width: 600px) {
.Assets::-webkit-scrollbar {
z-index:10;
}
/*asset table*/
.Assets{
width: 100%;
margin: 0px 0px 0px 0px;
}
/*add asset popup style*/
.add_assets {
left: 0;
top: 10%;
width: 100%; /* Full width */
height: 80%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
#submit, #Cancel_add{
width: auto;
}
.modal-content{
padding: 0;
}
#form_full{
width: 100%;
left: 0;
}
#Sign-up{
width: 50%;
right: 10px;
}
.Cancel{
margin-left: 10px;
}
#e-mail, #password, #name , #GPS_ID, #info{
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="./css/materialize.min.css" media="screen,projection"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Home</title>
</head>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a class="modal-trigger" href="#modal1">Add asset</a></li>
</ul>
<nav>
<div class="nav-wrapper">
<ul id="nav-mobile" class="right">
<li class="active"><a class="dropdown-trigger" href="#!" data-target="dropdown1">Assets<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a href="?logout=1">Uitloggen</a></li>
</ul>
</div>
</nav>
<body>
<table class='Assets responsive-table centered highlight'>
<thead>
<tr>
<th>Asset name</th>
<th>GPS_ID</th>
<th>Info</th>
<th>Actions</th>
</tr>
</thead>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<!-- add asset form -->
<div id="modal1" class="modal add_assets modal2">
<div class="modal-content">
<h4>Voeg asset toe</h4>
<form class="col s12 animate" action="" method="post">
<div class="row">
<div class="input-field col s12" id="name">
<input class="validate" type="text" required name="name">
<label for="Name">Asset name</label>
<span class="helper-text" data-error="Veld mag niet leeg zijn" data-success="correct">Geef de GPS tracker een naam</span>
</div>
<div class="row">
<div class="input-field col s12" id="GPS_ID">
<input class="validate" type="number" required name="GPS_ID">
<label for="GPS_ID">GPS tracker ID</label>
<span class="helper-text" data-error="Moet een nummer zijn" data-success="correct">Example: 32043123</span>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="info">
<input class="validate" type="text" required name="info">
<label for="Info">Other gps info</label>
<span data-error="Veld mag niet leeg zijn" data-success="correct" class="helper-text">Extra info over de GPS</span>
</div>
</div>
<div class="input-group">
<button id="submit" class="btn waves-effect waves-light" type="submit" name="submit">Add</button>
</div>
<button id="Cancel_add" type="button" class="btn waves-effect waves-light modal-close" >Cancel</button>
</div>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</html>
Чтобы смоделировать мою проблему:
Я использую Firefox в качестве браузера (с мобильным симулятором) ). (например, Chrome у вас нет этой проблемы, потому что полоса прокрутки автоматически скрывается)
- Откройте фрагмент как полную страницу и откройте консоль.
- Используйте firefox мобильный симулятор для минимизации экрана.
- Нажмите «Активы» в навигационной панели
- В раскрывающемся меню нажмите «Добавить активы»
- Модальное окно откроется и Вы увидите полосу прокрутки, перекрывающую модальное.
Приветствуются все советы / помощь.
Заранее благодарим.