igx-tabs overflow breaking layout

[ricardosaracino]

Description

For some reason the tabs are underneath the router outlet

"@angular/animations": "^17.3.2",
    "@angular/common": "^17.3.2",
    "@angular/compiler": "^17.3.2",
    "@angular/core": "^17.3.2",
    "@angular/forms": "^17.3.2",
    "@angular/platform-browser": "^17.3.2",
    "@angular/platform-browser-dynamic": "^17.3.2",
    "@angular/router": "^17.3.2",
    "@fontsource/roboto": "^5.0.12",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@infragistics/igniteui-angular": "^17.1.7",
    "@ngrx/effects": "^17.1.1",
    "@ngrx/store": "^17.1.1",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "accounting": "^0.4.1",
    "bootstrap": "^5.3.3",
    "hammerjs": "^2.0.8",
    "igniteui-angular-core": "^17.2.1",
    "igniteui-theming": "^5.1.0",
    "jwt-decode": "^4.0.0",
    "minireset.css": "^0.0.7",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.4"

Steps to reproduce

i fixed it by setting overflow: initial;

:host {

  height: 100%;
  display: flex;
  flex-direction: column;

  .igx-tabs {
    overflow: initial;
  }
}

<div class="p-3">

  <div class="d-flex">
    <h1 i18n>Transactions</h1>

    <button (click)="export()" class="ms-auto" igxButton="outlined">Spreadsheet</button>
  </div>

  <igx-tabs class="mt-3">
    <igx-tab-item routerLinkActive #rla1="routerLinkActive" [selected]="rla1.isActive">
      <igx-tab-header routerLink="subscriptions">
        <span igxTabHeaderLabel i18n>Subscriptions</span>
      </igx-tab-header>
    </igx-tab-item>
    <igx-tab-item routerLinkActive #rla2="routerLinkActive" [selected]="rla2.isActive">
      <igx-tab-header routerLink="redemptions">
        <span igxTabHeaderLabel i18n>Redemptions</span>
      </igx-tab-header>
    </igx-tab-item>
    <igx-tab-item routerLinkActive #rla3="routerLinkActive" [selected]="rla3.isActive">
      <igx-tab-header routerLink="transfers">
        <span igxTabHeaderLabel i18n>Transfers</span>
      </igx-tab-header>
    </igx-tab-item>
    <igx-tab-item routerLinkActive #rla4="routerLinkActive" [selected]="rla4.isActive">
      <igx-tab-header routerLink="switches">
        <span igxTabHeaderLabel i18n>Switches</span>
      </igx-tab-header>
    </igx-tab-item>
    <igx-tab-item routerLinkActive #rla5="routerLinkActive" [selected]="rla5.isActive">
      <igx-tab-header routerLink="carve-outs">
        <span igxTabHeaderLabel i18n>Carve Outs</span>
      </igx-tab-header>
    </igx-tab-item>
  </igx-tabs>

  <router-outlet></router-outlet>
</div>

Result

What is the actual result after following the steps to reproduce?

Expected result

What is the expected result after following the steps to reproduce?

Attachments

Attach a sample if available, and screenshots, if applicable.

[ricardosaracino]

So looks like that overflow broke my layout in a new and exciting way

if i switch tabs a few times it fixes itself

[ricardosaracino]

I think i might have figured out a reason this could be happening, the vertical scroll on the grid is outside of the container not inside the container. Collapsing the nav seems to have an effect on it

[onlyexeption]

@ricardosaracino can you please provide an example in stackblitz reproducing the described issue? I wasn't able to reproduce it locally.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.