Reputation: 31

Overflow body not working?

So i've been struggling with this issue for several days now, i've spent countless hours trying to read threads with similar topic, but none of them worked for me...

I'm trying to hide the body overflow, when a modal comes out.

Here is a screen to make the problem more visual :

So my goal is to remove that ugly double scroll bar when the modal show up.

As i've been putting in the comments, even when i try to hide all the body overflow, the initial scroll bar stays there... I'm clueless

Better than just an image, i tried to provide you with a code that copies the behaviour of this page, hope we will find out how to solve the issue. Take note that normally in the original code, there were plenty of includes and php loops and function calls, so this might affect the solution.

function Open(){         document.getElementById('createclub').style.display='block';      
      }
    function Close(){document.getElementById('createclub').style.display='none';}
    
    function w3_open() {document.getElementById("sidenav").style.display = "block";}
    function w3_close() {document.getElementById("sidenav").style.display = "none";}

// Solution 1

.w3-modal{
    overflow:hidden;
 }
 .w3-modal-content{
    overflow:scroll;
 }

<html>
  <head>
		<title>Table Display</title>
		<link rel="stylesheet" href="style.css">
		<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
	<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
	<link rel="stylesheet" href="lib/w3.css">
	</head>
  
  <body>
    <!-- Main Container-->
    <div class="w3-row"> 
      <!-- Header -->
      <div id="header" style="width:100%;height:150px" class="w3-container w3-display-top w3-diplay-container"> 
        <!-- Side Nav on Header -->
        <nav class="w3-sidenav w3-display-topright w3-black w3-padding-left-large w3-card-2 w3-animate-right" style="display:none;right:0;max-height:525px" id="sidenav">
          <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-padding-large w3-margin-bottom w3-margin-top"><i class="fa fa-close w3-xxlarge">&nbspClose</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-home  w3-xxlarge ">&nbspHome</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-group  w3-xxlarge w3-padding-right">&nbspTable1</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-calendar  w3-xxlarge w3-padding-right">&nbsTable2</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-address-book  w3-xxlarge w3-padding-right">&nbspTable3</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-arrow-circle-left w3-xxlarge w3-padding-right">&nbspLogOut</i></a>
        </nav>

        <span class="w3-opennav w3-display-topright w3-xlarge w3-right" onclick="w3_open()"><h1>&#9776</h1></span>
        
       <!-- Header Image-->
        <img src="" class="w3-display-topmiddle">
		  </div> <!-- End of Header-->
      
      <!-- Side Profile=First Column-->
      <div class="w3-col m3 w3-padding-xlarge" >
			<div class="w3-card-2 w3-teal w3-round">
	        	<div class="w3-container">
	         		<h4 class="w3-center"><b>My Profile</b></h4>
	         		<p class="w3-center"><img src="" class="w3-circle" style="height:200px;width:200px" alt="Avatar"></p>'?>
			        <p><i class="fa fa-address-card fa-fw w3-margin-right w3-text-theme"></i>First Name</p>
			        <p><i class="fa fa-address-card-o fa-fw w3-margin-right w3-text-theme"></i>Last Name</p>
			        <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i>Birthday</p>
			        <p><i class="	fa fa-drivers-license fa-fw w3-margin-right w3-text-theme"></i>Job</p>
	        	</div>
	     	</div>
	    </div><!-- End of side profile-->
      
    <!-- Main Block=Middle Column, Displays a table from DB -->
    <div class="w3-col m7">
				<div class="w3-row-padding w3-margin-top">
				  <div class="w3-half">
							<div class="w3-card-2 w3-margin-bottom">
								<a href=""><img src="" alt="Norway" 
								style="height:200px;width:100%" class=" w3-center w3-hover-opacity"></a>
							    <div class="w3-container w3-teal">
							        <h5 class="w3-center"><b>Table Name</b></h5>
							        <a href=""><button class="w3-btn-block w3-black w3-margin-bottom w3-padding " type="submit" style="width:100%">Overview</button></a>
							        <a href=""><button class="w3-btn-block w3-black w3-margin-bottom w3-padding" type="submit" style="width:100%">Org.</button></a>
							        <a href=""><button class="w3-btn-block w3-black w3-padding w3-margin-bottom" type="submit" style="width:100%">Join</button></a>
							    </div>
							</div>
						</div>
			  </div>
			</div><!--End of Main Block-->
      
      <!-- Side Event=Third Column, this is where it all lies-->
        <div class="w3-col m2 w3-right w3-padding-xlarge">
          <div class="w3-card-2 w3-round w3-teal w3-center">
              <div class="w3-container">
              <p>Following Event:</p>
              <img src="" alt="Forest" style="width:100%;max-height:150px">
              <p><strong>Holiday</strong></p>
              <p>Friday 15:00</p>
              <p><button class="w3-btn w3-btn-block w3-theme-l4">+ Info</button></p>
              </div>
          </div>
          
          <!--  THE Modal --> 
           <button id="buttoncreate" onclick="Open()" class="modal-open-button w3-btn w3-border w3-margin w3-padding-large w3-right" >Create</button>
    	<div id="createclub" class="w3-modal">
    		<div class="w3-modal-content w3-card-8 w3-animate-zoom" style="max-width:600px;margin-top:-5%">
				<div class="w3-center"><br>
        			<span onclick="Close()" class="w3-closebtn w3-display-topright w3-hover-red w3-container w3-padding-10 " title="Close Modal">&times;</span>
        		</div>

        		<form class="w3-container" action="" method="post">
        			<div class="w3-section">
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="type name" name="name" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="type info" name="someinfo" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="date" name="date" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="type some theme" name="theme" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="email" placeholder="type email" name="email" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="password" placeholder="pass" name="pass" required>
        				
        				<textarea rows="4" cols="50" class="w3-input w3-border w3-margin-bottom" placeholder="type descr" name="descr" required></textarea>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="link image" name="image">
        				<button class="w3-btn-block w3-blue-grey w3-section w3-padding" type="submit">Submit</button>
        			</div>
        		</form>
        	</div>
        </div>
        </div>
    </div> <!-- End of Main Container -->
  </body>
</html>

Upvotes: 1

Answers (2)

Vohid Karimov

Reputation: 549

One scrollbar at a time :) As I understand, you want to remove scroll bar of modal content. However, as seen in the image, modal content is long in height thus needs scrolling.

What I suggest is to hide scrollbar with negative margin-right (e.g: margin-right: -20px) and wrapper with overflow: hidden. Then, users can scroll only with mouse wheel or touchpad.

<div class="modal-wrapper">
    <div class="modal-content"></div>
<div>

.modal-wrapper {
overflow: hidden;
}
.modal-content {
overflow: scroll;
margin-right: -20px;
}

If you can create working plunker of page, I will help you in detail.

Upvotes: 2

Jozef Mikušinec

Reputation: 223

Answer in this question suggests seting height of html and body to 100%:

html, body { height: 100% }

Upvotes: -1

Overflow body not working?

Answers (2)

Related Questions