Navigating to the top of the page with Angular 5 tab scrolling

Currently, I am facing an issue with the Angular 5 Tabs. Whenever I switch from one tab to another, the page automatically scrolls to the top. Is there anyone familiar with a solution to this problem?

<div class="row">
  <div class="col-md-12">
    <mat-tab-group dynamicHeight="true">
      <ng-container *ngFor="let rubric of assessmentForm.rubrics">
        <mat-tab label="{{rubric.title}}">
          <div class="table-responsive">
            <table class="table table-bordered wrappedTable">
              <thead>
              <tr>
               <td></td>
              </tr>
              </tfoot>
            </table>
          </div> <!-- /table-responsive -->
        </mat-tab>
      </ng-container>
    </mat-tab-group>
  </div>
</div> <!-- /row -->

Please note that I have excluded some code within the table which may not be related to this scrolling issue.

Answer №1

One possible explanation is that when switching tabs, the new tab may not have enough content to maintain the same height as the previous tab. This results in the overall height of the parent container decreasing, causing it to scroll back to the top.

A simple solution to this issue is to set a minimum height for the container, like so:

<div class="col-md-12" style="min-height:800px;">
  <mat-tab-group dynamicHeight="true">
   ....content
  </mat-tab-group>
</div> 

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

ng-click-outside event triggers when clicking outside, including within child elements

I am looking to trigger a specific action when I click outside of the container. To achieve this, I have utilized the ng-click-outside directive which works well in most cases. However, there is one scenario where an issue arises. Inside the container, the ...

Does HTML5 officially provide the speechsynthesis API for users?

Can someone clarify if speech synthesis is officially supported by HTML5 for converting text-to-speech? ...

The collapsible menu is not expanding properly after a click event due to the small size of

My website has a menu placed in the header with a background color. When resizing the page (max width 1044 px), it switches to a mobile menu, but the div holding the menu and anchors is too small compared to the header. Is there a solution to this issue? ...

Preventing opening new tabs when clicking on "_blank" links in Selenium VBA

When using HTML, the code to create a link that opens in a new browser tab is as follows: <a target="_blank" id="mylink" herf="www.google.com">google</a> In VBA, you can use the following code to click on the link using the driver object ...

What's causing all my carousel slides to stack on top of each other instead of presenting in a

Whenever I click 'run' or 'preview' in a browser, specifically using Chrome, all three slides are displayed stacked from 1 to 3 in a static view. They do not toggle through each slide as intended. This issue only occurs on Codeply, a p ...

I desire for the body to utilize the full height of the screen

My website consists of a header div and a body div. I am trying to make the body div expand to fill the entire screen height. When I set the height to 100vh, it expands correctly but it does not take into account the height of the header div, resulting in ...

Issue with Angular 8: Undefined value for ngModuleType.ngModuleDef.id when trying to import NguCarousel module

After attempting to import the NguCarousel module, my application encounters an issue due to ngModuleType.ngModuleDef being undefined. Interestingly, if I disable the import of the NguCarousel module, the app functions properly. I have experimented with di ...

GlideJS is experiencing a flashing issue on the first slide

Is anyone else experiencing a flashing issue when changing slides in the slider periodically? Specifically, the first slide flashes when transitioning from the first to the last slide. This bug seems to be isolated to Chrome only. Interestingly, I've ...

Typescript error: The value "X" cannot be assigned to this type, as the properties of "Y" are not compatible

Disclaimer: I am relatively new to Angular2 and typescript, so please bear with me for any errors. The Challenge: My current task involves subtracting a start date/time from an end date/time, using the result in a formula for my calculation displayed as " ...

Retrieve all elements within the iframe element

I have encountered a situation where I am using an iframe tag to load an epub file. However, I'm unsure of how to access all the elements within the iframe tag. jQuery(document).ready(function($) { var content = $('#epub_loader iframe&apo ...

What is the best way to input individual students' CA and exam scores into distinct fields and then calculate their total scores in a separate text field?

As a beginner in jQuery, I am looking for guidance on creating a script that calculates the Total score, Grade, Remark, and Position based on the user input of CAT score and EXAM score. The result should be displayed dynamically once both scores are entere ...

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

My animated background is looping infinitely and working perfectly in Chrome and Safari. However, I'm having trouble getting it to work in IE and FF. I've tried looking at other people's questions on this topic but still can't figure it ...

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

The method to update the shopping cart quantity count without needing to refresh the page or navigate to a separate page

One issue I am facing is with the code that displays a live count of items in the shopping cart. It doesn't update instantly, requiring a page reload or navigation to another page for the changes to be visible. The current code is implemented on a pa ...

Error: The Angular test bed is unable to locate the mixpanel definition

Is there a way to test the functionality of the form without considering Mixpanel? I am encountering an error as follows. login.component.ts ngOnInit() { Mixpanel.trackEvent("View Screen", { "Screen Name": "Login" }); this.createForm(); } cr ...

GridView with scroll functionality across various web browsers

I have set up a scrollable gridview with a table that mirrors the header of the grid. Each column has a specific width in pixels, but it seems to render differently across various browsers. Any assistance would be greatly appreciated. This is the HTML mar ...

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

Mobile Device Centering Problem with Bootstrap Cards

Despite my thorough research efforts, I have been unable to find a solution. The code snippet below is meant to display the image provided, but it seems to shift to the left when viewed on a mobile device. If anyone can assist me with this issue, I would ...

The karma test encounters difficulties in establishing a connection with the 'chrome' instance that has been launched

Currently, I am facing an issue with my Karma test running on a nodejs jenkins pod. npm is timing out when trying to connect to the Chrome instance on the selenium hub. Everything was working fine until yesterday without any changes made to the configura ...