0

In w3.css when the content of modal is huge enough, it will add a vertical scrollbar that it is common and Okay. but when the main HTML document has it own scrollbar, both of scrollbars will add close together and it is ugly.

enter image description here

Please see the bellow snippet code:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Modal</h2>
  <p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-btn w3-black">Open Modal</button>
  <p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h2>Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Footer</p>
      </footer>
    </div>
  </div>
</div>
          
</body>
</html>

Can you please guide me how I can avoid this?

Reza Amya
  • 1,494
  • 2
  • 25
  • 40
  • in this situation i use jquery plugin like nicescroll: https://nicescroll.areaaperta.com/demo/ – Imon Feb 10 '19 at 16:48
  • 2
    A personal advice: stay away from w3schools. They have no affiliation whatsoever with W3C. They are simply capitalizing showing ads to anyone looking for the official specs. A much better resource is MDN, which is backed up by W3C, Google, Mozilla, Microsoft and many, many others. Regardless, your problem is fixed by adding a class on `` when opening the modal, giving `` `overflow:hidden` and removing the same class from `` when closing the modal. – tao Feb 10 '19 at 16:50
  • As a sidenote, I don't have something against w3schools. It's just that, in order to stay up to date with the specs, they need to pay their employers to update the content, whereas MDN is backed by W3C and the content is changed automatically when the spec changes. The integration is largely automated. And MDN is based on voluntary effort by both huge corporate and individual developers, which means they'll always have more resources for keeping the content up to date, even if the process wouldn't be automated at all. – tao Feb 10 '19 at 16:57

1 Answers1

0

its work me. you can remove width of scrollbar, just use ::-webkit-scrollbar this selector 

.w3-container{
  max-height: 500px;
  overflow: auto;
}
.w3-container::-webkit-scrollbar {
  width: 0;
}
Imon
  • 659
  • 1
  • 4
  • 11
  • You're throwing usability out the window. You can't click and drag on the scrollbar anymore. Might not seem important, but there are people who depend on a particular type of accessibility feature to be able to use the web. – tao Feb 10 '19 at 17:00