Tab Scrollable mode

[Unknown]

Hello,

Tab Scrollable mode gets triggered only on window resize. Is it possible to set Scrollable mode on HTML element resize?

[Deepa Loganathan]

Hi,  

 

We understood your query to set Scrollable mode on HTML element resize and would like to let you know that we handled only the window resize event to enable scrollable mode in Tab and we do not provided support for element resize. 

So, you can use third-party plugin to handle an element resize in your sample. While resizing a component call refresh method of tab component, it will enable scrollable mode. 

Please find the code snippet for the same. 

import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 

import { TabComponent } from '@syncfusion/ej2-angular-navigations'; 

@Component({ 

  selector: 'app-root', 

  template: ` 

    <ejs-tab #tab heightAdjustMode='Auto'> 

      <e-tabitems> 

        <e-tabitem [header]='headerText[0]' content="content0"></e-tabitem> 

        <e-tabitem [header]='headerText[1]' content="content1"></e-tabitem> 

        <e-tabitem [header]='headerText[2]' content="content2"></e-tabitem> 

      </e-tabitems> 

    </ejs-tab> 

  `, 

  encapsulation: ViewEncapsulation.None 

}) 

export class DefaultTabComponent { 

  @ViewChild('tab') tab: TabComponent; 

  // Mapping Tab items Header property 

  public headerText: Object = [ 

    { text: "Twitter", 'iconCss': 'e-twitter' }, 

    { text: "Facebook", 'iconCss': 'e-facebook' }, 

    { text: "WhatsApp", 'iconCss': 'e-whatsapp' } 

  ]; 

  // Resize Handler 

  public resizeHandler(): void { 

    this.tab.refresh(); // Refresh a tab to enable scrollable mode 

  } 

} 

 

 

Please let us know if you have any further concerns.  

 

Regards,  

Deepa L.