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.

https://i.sstatic.net/ZcNKM.png

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.

https://i.sstatic.net/IShMV.png

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.

https://i.sstatic.net/0CSWE.png

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

"Upon clicking the login button, I encountered an issue with redirecting to the destination

I've been working on developing a login page using Angular framework. However, I'm facing an issue where I am unable to access the destination page after entering the login credentials. Below, you can find a snippet of the code from the login.com ...

javascriptangulartypescriptroutes

I want to use flexbox to center three divs on my webpage

I am trying to align 3 divs inside a flex container in the center of the page with equal distance between them and also from the edge of the page. .container { display : flex; width : 60%; } .para { width : 33%; padding : 1em; borde ...

htmlcssflexbox

As I scroll past the top or bottom of the page, the body's background color transitions to a new shade

I am encountering an issue with my next.js app where the body background color is set to black. Here is the code in globals.css: body { background-color: black; padding: 0; margin: 0; font-family: 'Titillium Web', sans-serif; } However, ...

cssnext.jsbackgroundbackground-color

Headers and data organization in Angular 2

I'm searching for a simple Angular 2 example that demonstrates how to fetch both the headers and data from a JSON API feed. While there are plenty of examples available for fetching data only, I haven't been able to find any that show how to retr ...

javascriptjsonangular

Is the table scrollable within the tbody tag?

Is it possible to create a table with a scrollbar on the right side using only CSS and without any plugins like jQuery? Additionally, I want the table header to remain fixed in place. What steps do I need to take to achieve this functionality? ...

htmlcssscroll

The ngx-datatable is designed to bind only to the final comparator

When utilizing templates with ngx-datatable-column and binding comparator functions, only the final bound comparator is applied to all sortable columns. For instance: <div class="m-333"> <button mat-raised-button color="primary" (click)="openP ...

angularngx-datatable

Mapping JSON arrays to Angular models using the map operator

I am facing the challenge of mapping JSON array objects from my server to an angular model. I believe that the ideal time to do this is as soon as I receive them in the pipeline at the map function. However, I am unsure about how to accomplish this using t ...

jsonangularrxjs

a height of 100% with a minimum height of 100%

Is there a way to make the third and fourth rectangles have the same position while filling all the remaining height in %? Keep in mind that we can't change the min-height:100% on the body or html. Feel free to use CSS and HTML for your code solution. ...

htmlcss

The type 'Observable<unknown>' cannot be assigned to type 'Observable<Something>'

I am a beginner with Angular and Firebase, facing an issue while attempting to import of from rxjs and returning null using switchMap in my auth.service.ts. import { ActivatedRoute } from '@angular/router' import { Observable, of } from 'r ...

angularfirebaserxjs

Several levels piled one on top of the other

I'm in the process of designing a section for a webpage using Bootstrap 3.0, and I want to layer three divs or sections on top of each other. The stacking order should be as follows: background "squares," footer, and foreground "squares" with images. ...

htmlcsstwitter-bootstrap

What is the best way to align a box once another one has been placed?

I have integrated both Bootstrap and Masonry plugins into my website design. The issue I am facing is that the Masonry plugin box goes under the top Bootstrap bar. I tried adding a margin-top: 50, but this resulted in a horizontal scroll bar appearing. To ...

javascriptjquerycsstwitter-bootstrapgrid

Text Box: Add a touch of flair with resizing

One interesting feature on my webpage is a textarea that can be resized using resize:both; I am looking for a way to apply a specific style to this textarea only when the user resizes it. While I would prefer to achieve this with CSS alone, it seems like ...

jqueryhtmlcss

Using typescript, import the "anychart" library

After attempting to include the "anychart" library in my .ts file using the following import statement: import 'anychart'; I noticed that this line of code caused the entire HTML page on my local server to disappear. Here is a snippet from my ...

angulartypescriptanychart

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

Improving the method to change a string into a string literal in TypeScript

Utilizing a third-party tool that has specified editorStylingMode?: 'outlined' | 'underlined' | 'filled'; I have set the value in my environment.ts file (in Angular) as shown below export const environment = { productio ...

angulartypescript

When comparing the values of two arrays with undefined property values

Struggling with sorting an array of arrays that works perfectly except when the property value is undefined. Take this example: posts array = {id: "1", content: "test", "likes":[{"user_id":"2","user_name":"test"}] }, {id: "2", content: "test", "likes": ...

javascriptarraysangularsorting

Storing a child in an existing object with Firebase and Angular 6

How can I save a new form to an existing list with the following code snippet: createNewTumeur(newTumeur: Tumeur) { this.tumeurs.push(newTumeur); const id: string = this.route.snapshot.params['id']; firebase. ...

javascriptangularfirebasefirebase-realtime-database

Reduced resolution decreases image size significantly (bootstrap-5 Fluid)

What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additi ...

htmlcssbootstrap-4bootstrap-5

Verify whether an email is already registered in firestore authentication during the signup process using Angular

When a user signs up for our app, I want them to receive immediate feedback on whether the email they are attempting to sign up with already exists. Currently, the user has to submit the form before being notified if the email is taken or not. This desire ...

javascriptnode.jsangularfirebasegoogle-cloud-firestore

Exploring the world of ng2-translate for translating texts

For the translation of headings and texts in my Angular2 web application, I utilized ng2-translate. However, I am facing a dilemma when it comes to translating texts that are passed from a .ts file. For example, I can easily translate texts in an HTML fi ...

angulartypescriptionic2language-translationng2-translate