Question 244054 in Html Question posted in
Some basic documentation can be found here.

Html – I can't scroll down when the div show up

When I click on column on table it show a div with some informations , the div is a little bit long with plus than 400px in height, that why I need to scroll down to see it all , but unfortunately i can’t ,even it exceed the hight of th webpage still nothing happened it like it not even there , the horizontal and vertical scroll bar work fine with table but not with the div .
Here is the html of the div . :

 <div className='overlay'>
        <div className="container-vertical">
        <div className="point-vertical">
          <label className='noisy'>Noisy-le -Sec</label>
          <button className='button_veri_green'><img className='img_veri_green' src={veri_green}></img></button>
           <label className='gps'>93130, France | Type | Statut</label> </div>
        <div className="line-vertical"></div>
        <div className="point-vertical"><label className='noisy'>Noisy-le -Sec</label> <button className='button_veri_red'><img className='img_veri_green' src={veri_red}></img></button><label className='gps'>93130, France | Type | Statut</label> </div>
        <div className="line-vertical"></div>
        <div className="point-vertical"><label className='noisy'>Noisy-le -Sec</label> <label className='gps'>93130, France | Type | Statut</label> </div>
        <div className="line-vertical"></div>
        
        <div className="point-vertical"><button className='timer_btn'><img className='timer' src={timer}></img></button><label className='noisy'>Noisy-le -Sec</label><button className='x'><img className='img_veri_green' src={x}></img></button> <label className='gps'>93130, France | Type | Statut</label> </div>
        <div className="line-vertical"></div>
        <div className="point-vertical"><button className='question_mark_btn'><img className='question_mark' src={question_mark}></img></button> <label className='noisy'>Noisy-le -Sec</label> <label className='gps'>93130, France | Type | Statut</label> </div>
    
        <div className="dot-vertical"><img className='img-vertical' src={car_img} /></div>
    </div>
        </div>

the CSS :

.overlay {
  position: fixed;
  width: 458px;
  height: 422px;
  top: 0;
  left: 0;
  background: #FFFFFF;
  overflow-y: auto;
  box-shadow: 0px 3px 6px #1F1F1F29;
  z-index: 999; /* Set a high z-index value */
}

The js code that show it :

const overlay = document.querySelector('.overlay');

const tdWithProgression = document.querySelectorAll('.progression');

tdWithProgression.forEach(td => {

  td.addEventListener('click', (event) => {
    event.stopPropagation(); 
    const tr = td.parentElement; 
    const rowIndex = tr.rowIndex;
    const trows = document.querySelectorAll('tr');
    trows[rowIndex].style.background = 'white';
    
    // Calculate the position relative to the viewport
    const viewportTop = window.scrollY || window.pageYOffset;
    const viewportLeft = window.scrollX || window.pageXOffset;
    const topset = viewportTop + 200; // Adjust the top position as needed
    const leftset = viewportLeft;

    overlay.style.display = 'block';
    overlay.style.top = topset + 'px'; 
    overlay.style.left = leftset + 'px';
  });
});

I tried to add owerflow-y:auto or owerflow:auto , didn’t work , I also tried to make vertical scroll always showed in the page but also didn’t work with the div .

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    For some reason the problem was in

     position:fixed

    when I remove it , the position of the div get down but I was able to scroll down to see it , I had just to update the top in the function and it work well, Here is CSS :

    .overlay {
  position: relative;
  display: none; /* Initially hidden */
   /* Position it relative to the viewport */
  width: 458px;
  height: 422px;

  background: #FFFFFF 0% 0% no-repeat padding-box;
  z-index: 1000; /* Ensure it's on top of everything */
  /* Add other styles as needed */
  box-shadow: 0px 3px 6px #1F1F1F29;
}

    and for Javascript I just change this line by adding "-200"

    overlay.style.top = topset -200+ 'px';

  2. 0

    It seems that you’re facing an issue where the content inside the .overlay div is not scrolling when its height exceeds the available space. To make sure the content inside the overlay can scroll properly, you should set a fixed height for the .overlay container and then apply overflow-y: auto to enable vertical scrolling when necessary. Here’s how you can adjust your CSS:

    .overlay {
  position: fixed;
  width: 458px;
  max-height: 422px; /* Set a maximum height for scrolling */
  top: 0;
  left: 0;
  background: #FFFFFF;
  overflow-y: auto; /* Enable vertical scrolling when content exceeds max-height */
  box-shadow: 0px 3px 6px #1F1F1F29;
  z-index: 999; /* Set a high z-index value */
}

    In this CSS snippet, max-height is set to 422px, which is the maximum height you want for your .overlay container. When the content inside exceeds this height, a vertical scrollbar will appear within the .overlay container, allowing users to scroll down to view the additional content.

    Make sure to adjust the max-height value as needed to accommodate your content without causing the overlay to extend too far beyond the viewport.

    Login or Signup to reply.
  3. 0 
    const overlay = document.querySelector('.overlay');
const tdWithProgression = document.querySelectorAll('.progression');

tdWithProgression.forEach((td) => {
  td.addEventListener('click', (event) => {
    event.stopPropagation();
    const tr = td.parentElement;
    const rowIndex = tr.rowIndex;
    const trows = document.querySelectorAll('tr');
    trows[rowIndex].style.background = 'white';

    // Show the overlay
    overlay.style.display = 'block';
  });
});

// Close the overlay when clicking inside it or outside it
document.addEventListener('click', (event) => {
  if (overlay.style.display === 'block') {
    overlay.style.display = 'none';
  }
});

// Prevent clicks inside the overlay from closing it
overlay.addEventListener('click', (event) => {
  event.stopPropagation();
});

// Close the overlay when clicking the "Close Overlay" button
const closeButton = document.querySelector('.close-overlay');
closeButton.addEventListener('click', () => {
  overlay.style.display = 'none';
});
    /* Add your existing CSS styles */
.overlay {
  display: none;
  position: fixed;
  width: 458px;
  height: 422px;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  overflow-y: auto;
  box-shadow: 0px 3px 6px #1F1F1F29;
  z-index: 999;
}

.overlay-content {
  /* Add styling for the content within the overlay */
  padding: 20px; /* Adjust as needed */
}
    <table>
  <tr>
    <td class="progression">Column 1</td>
    <td class="progression">Column 2</td>
  </tr>
</table>

<div class="overlay">
  <div class="overlay-content">
    <h2>Overlay Content</h2>
    <p>This is some sample content inside the overlay.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <button class="close-overlay">Close Overlay</button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search