Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

I have a tab with lengthy content in my project (check out the StackBlitz reference here).

This causes the appearance of a scroll.

The corresponding code snippet is provided below:

<div class="content-container">
        <div class="content-area">

            <clr-tabs>
                <clr-tab>
                    <button clrTabLink id="tab1-link">Tab1</button>
                    <clr-tab-content id="tab1-content" *clrIfActive="true">
                        ...
                    </clr-tab-content>
                </clr-tab>
                <clr-tab>
                    <button clrTabLink id="tab2-link">Tab2</button>
                    <clr-tab-content id="tab2-content" *clrIfActive>
                        Content2
                    </clr-tab-content>
                </clr-tab>
            </clr-tabs>

        </div>
    </div>

The issue I am facing is that the scroll covers both the tab labels and content. My requirement is for it to only cover the tab content, keeping the tab labels visible as I scroll down.

To address this problem, I attempted to apply some styling adjustments:

.content-area {
  overflow: hidden !important;
  height: 100%;
}

#tab1-content, #tab2-content {
  height: 100%;
  overflow: auto;
}

However, implementing these styles caused the scroll to disappear entirely. How can I ensure that the scroll only affects the tab content?

cssangularscrollvmware-clarity

Answer №1

Upon analyzing your code snippet, I found that Tab1 and Tab2 are list items within an unordered list with the class nav in Stackblitz.

To achieve the desired layout, consider moving this nav ul outside of the content-container div and positioning it right below the header-2 element. This will allow the content-container div to fill up the remaining space in the main container while keeping the Tab list elements fixed at the top.

This solution may be a result of the existing flex-related settings being properly configured.

Answer №2

I discovered a solution that worked for me. To resolve the issue of scrollbar visibility in the parent component content-area, I added the overflow property.

.content-area {
  overflow: hidden ;
}

This removed the existing scrollbar. Next, I used Chrome Dev Tools to determine the heights of the elements above.

To address this, I wrapped the tab content in another div with a specific class (e.g. mytab-content).

    <clr-tab-content id="tab1-content" *clrIfActive="true">
        <div class="mytab-content">
        .......
        </div>
    </clr-tab-content>

Finally, I added styles to the class like so:

.mytab-content {
  height: calc(100vh - 60px - 36px);
  overflow: auto;
}

With these changes, scrolling is now limited to the tab content only.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a jQuery plugin within an Angular 2 component: A step-by-step guide

Looking to implement an image slider plugin called Vegas only on the home page within my Angular 2 application. The Vegas jQuery plugin has been added via npm and is located under the /node_module directory. The following code snippet shows my home page c ...

jqueryangular

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

htmlcsswordpress

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss

Issue with Angular2 Router: No routes were found for the specified path ''

I have set up the Angular2 Router in the following way: import { provideRouter, RouterConfig } from '@angular/router'; import { Page2} from './page2'; const routes: RouterConfig = [ { path: 'page2', component: Page2 } ]; ...

angularangular-routing

Tips for resolving the issue of the symbol ' displaying as &#39 in an Angular 2 application

I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as &#39 instead. I managed ...

javascripthtmlangularkendo-gridjql

Angular HTTP client failing to convert response data to specified type

Recently, I started using the new HttpClient and encountered an issue where the response is not cast with the provided type when making a call. I attempted to use both an interface and a class for casting, but it seems that only interfaces work as shown in ...

angularhttpcasting

The hamburger menu appears to be missing when viewing in Safari, while it functions properly on both Chrome and Firefox browsers

My website has a responsive menu that functions perfectly in Chrome and Firefox, but encounters issues in Safari on mobile devices. The site is built using Elementor WordPress and I believe adding some -webkit- properties could solve the problem, but I&apo ...

cssmenumobile-safarihamburger-menumobile-webkit

Using FormControl Inheritance in Angular 4

My goal is to enhance the functionality of a FormControl by creating a subclass with additional properties. These properties will then be utilized in custom form controls to modify behavior. I attempted to inherit from FormControl (let's call it Stan ...

angularangular4-forms

Changes in the width of the left column in Bootstrap 4 are based on the content present in the right column

I seem to be struggling with implementing Bootstrap effectively. My goal is to achieve a layout similar to this, once the "Load Report" button is clicked and there is data to display: https://i.stack.imgur.com/c3nuO.png In the image, there are two column ...

angularbootstrap-4gridbootstrap-grid

Issue with positioning Bootstrap tooltip on the right side causing it to not display correctly

Currently, the tooltip I have is functioning properly: However, my main requirement is to align it to the right. So, when I use .pull-right, it appears like this: This is the HTML code snippet: <div class="wrapper">Login <span rel= ...

jqueryhtmlcsstwitter-bootstrap

What is the proper way to employ if and else if statements within Angular2?

Here's a question that has been duplicated on my How to utilize *ngIf else in Angular? post! ...

javascriptangular

ERROR: The variable countryCallingCode has not been defined

I encountered an error when attempting to assign a value to my property countryCallingCode, which does not exist in the first option. this.allData.customerFacingPhone.countryCallingCode = newItem.countryCallingCode The error message I received was: ERROR ...

javascriptangulartypescript

Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width. I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens. Additiona ...

htmlcssresponsive-design

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui

Prevent a specific directory from being compiled in MSBuild using Typescript

I have a unique ASP.NET MVC / Angular2 project that utilizes MSBuild for compiling my Typescript files. Within the project, there is the complete Angular2 source code along with its NodeJS dependencies, in addition to my own Angular2 code (app.ts, etc.). ...

asp.net-mvcangulartypescriptmsbuildcsproj

Sidenav Angular Material cdkScrollable is an effective tool for creating scrollable

In Angular Material CDK, there is a special Directive called CdkScrollable that allows you to monitor ScrollEvents within a specific container. I am currently attempting to retrieve the CdkScrollable associated with the default MatSidenavContent. Unfor ...

angulartypescriptscrollangular-material2angular-cdk

Utilize open-source tools for website design

Can anyone suggest an open source toolset for WYSIWYG HTML/CSS design? What tools have you found most helpful in your projects? ...

htmlcss

Displaying [object Object] in Angular Material datatable

I am currently working on implementing a datatable component using Express and Firebase DB. Below is the service request data: getText() { return this.http.get<nomchamp[]>(this.url) .map(res => { console.log(res); return res }); ...

javascriptangularexpressdatatableangular-datatables

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

htmlcss

deleting the existing marker before placing a new marker on the Mapbox

Upon the map loading with GeoJson data, I have implemented code to display markers at specified locations. It works flawlessly, but I am seeking a way to remove previous markers when new ones are added. What adjustments should be made for this desired func ...

angulartypescriptwebmapbox-gl-jsmapbox-marker