Intro.Js doesn't scroll inside table element but scrolls the whole page and highlights empty area

vishwasracharya commented 5 months ago

Description

When Intro.js is applied to table elements, and the table is enclosed within a div with restricted height, there is an issue where Intro.js highlights an empty element that is hidden behind the div.

Expected Behavior

The into.js highlight should scroll inner div not the whole page.

Actual Behavior

The into.js highlight scrolls the whole page.

Errors and Screenshots

Video Link: https://github.com/usablica/intro.js/assets/84620359/e512faba-d5ae-45de-82f7-13c82785b629 Screenshot:

Example (recommended)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Basic usage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
    <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">

    <!-- styles -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/css/demo.css" rel="stylesheet">

    <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/minified/introjs.min.css">

    <style>
      .marketing {
        height: 30px;
        height: 40vh;
        margin-top: 500px;
        margin-top: 40vh;
        overflow: auto;
      }

      /* Additional styling for the table */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }

      th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }
    </style>
  </head>

  <body>

    <div class="container-narrow">

      <div class="masthead">
        <ul class="nav nav-pills pull-right">
          <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
          <li><a href="https://github.com/usablica/intro.js">Github</a></li>
          <li><a href="https://twitter.com/usablica">@usablica</a></li>
        </ul>
        <h3 class="muted">Intro.js</h3>
      </div>

      <hr>

      <div class="jumbotron">
        <h1 data-step="3" data-intro="This is a tooltip!">Works with a Scrollable Element</h1>
        <p class="lead">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
      </div>

      <hr>

      <div class="marketing">
        <table>
          <tr>
            <th data-step="2" data-intro="Another step.">Section One</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
          <!-- Repeat the structure for other sections -->

          <!-- Example for Section Six with scrolling step -->
          <tr>
            <th data-step="1" data-intro="A scrolling step.">Section Six</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>

          <tr>
            <th data-step="3" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>

          <tr>
            <th data-step="4" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>

          <tr>
            <th data-step="5" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>

          <tr>
            <th data-step="6" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>

          <!-- Repeat the structure for other sections -->
        </table>
      </div>
      <hr>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/intro.min.js"></script>
  </body>
</html>

Environment

Intro.js Version: 7.2.0 OS: Windows 10 & Mac Mini intel i5 JavaScript libraries: Angular 13 (13.1.0) Browser Version: Version 120.0.6099.201

vishwasracharya commented 5 months ago

Hello @bozdoz,

I have noticed that you may have previously addressed a similar issue. I would appreciate your help in providing guidance or a solution for this issue.

stale[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

vishwasracharya commented 3 months ago

Guys, Are we planning to Fix this?

usablica / intro.js