New to Kendo UI for jQuery? Download free 30-day trial

Disable TabStrip Content Scrolling

Environment

Product Progress Kendo UI TabStrip for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I disable the scrolling of the content in a Kendo UI for jQuery TabStrip?

Solution

The content containers of the TabStrip are scrollable by default, which allows the widget to display scrollbars if it has a fixed height and if it holds large content that cannot fit.

If required, you can disable the TabStrip content scrolling to help in scenarios where the TabStrip hosts a widget, such as a Menu, that needs to overflow outside the TabStrip.

The milestones of the approach are:

  • Apply an overflow:visible CSS style to the div.k-content elements that hold each TabStrip tab content.
  • The .k-content class is used by other widgets too. Make sure the CSS selector targets only the appropriate elements.

The example below demonstrates how to disable content scrolling for a specific TabStrip instance only by using its ID in the CSS selector.

    <div id="tabstrip1">
      <ul>
        <li class="k-state-active">
          First tab
        </li>
        <li>
          Second tab
        </li>
      </ul>
      <div style="height:100px">
        <p>Container is scrollable, the Menu group will open inside the TabStrip.</p>
            <ul id="menu1">
                <li>
                    First Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
            </ul>        
      </div>
      <div>Second content container</div>
    </div>

    <br /><br />

    <div id="tabstrip2">
      <ul>
        <li class="k-state-active">
          First tab
        </li>
        <li>
          Second tab
        </li>
      </ul>
      <div style="height:100px">
        <p>Container is not scrollable, the Menu group will open outside the TabStrip.</p>
            <ul id="menu2">
                <li>
                    First Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
            </ul>
      </div>
      <div>Second content container</div>
    </div>

    <style>

      #tabstrip2 > .k-content {
        overflow: visible;
      }

    </style>

    <script>

      $(function() {
        $("#tabstrip1").kendoTabStrip();
        $("#menu1").kendoMenu();

        $("#tabstrip2").kendoTabStrip();
        $("#menu2").kendoMenu();
      });

    </script>

See Also

In this article