Modal not overlapping scrollbar

Question

Problem:

The Table on the page gets a overflow when needed.

When I press "assets" and "add assets" There comes a modal where I can add a "Asset". The modal overlaps all items on the body except the scrollbar of the table.

As you can see on the image at the input "GPS tracker ID" there is a scrollbar.

I am using Materialize modals and Materialize Table for this project.

Question:

How can I overlap the scrollbar as well?

Code:

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%;
  }
}






	
  	
  	
  	
  	
	Home



  Add asset

  
    
      
        Assetsarrow_drop_down
        Uitloggen
      
     
  


	  
	  	Voeg asset toe
		  
		   	
				
					
	          		Asset name
	          		Geef de GPS tracker een naam
				
			
				
					
	          		GPS tracker ID
	          		Example: 32043123
				
			
			
				
					
	          		Other gps info
	          		Extra info over de GPS
				
			
		     
	      		
	    	
	      		
	    	
		  
		
	
To simulate my problem:
I am using Firefox as browser (with mobile simulator).
(in for example Chrome you don't have this problem because the scrollbar is auto hiding)

Open the snippet as full page and open the console.
Use the firefox mobile simulator to minify the screen.
Press 'Assets' in the nav bar
In the drop-down press 'Add assets'
The modal will open and you will see the scrollbar overlapping the modal.
Every tip/ help is welcome.
Thank you in advance. 

  
    
      Asset name
      GPS_ID
      Info
      Actions
    
  
  
    Test
    Test
    Test
    Test
  
  
    Test
    Test
    Test
    Test
  
  
    Test
    Test
    Test
    Test
  
  
    Test
    Test
    Test
    Test
  
  
    Test
    Test
    Test
    Test
  
  
    Test
    Test
    Test
    Test

J.vee · Accepted Answer

First of all Big thanks to @Awais for the help.

The solution:

Apparently the scroll bar is only showing when u simulate mobile few in Firefox.

When I put the code on hosting and visit the website on my mobile with Firefox browser. There is no scrollbar.

Modal not overlapping scrollbar

Answers (2)

Related Questions