How to handle ejs-splitter and ejs-tab elements in Angular for seamless resizing and tab handling

[techlandandyzhang]

https://stackblitz.com/edit/angular-hgabqi?file=src%2Fapp.component.html

In Angular, I'm using an ejs-splitter element nested within an ejs-tab element. When I resize the ejs-splitter element, the ejs-tab element doesn't automatically adjust its size, hide tabs into a popup list, and keep the selected element always displayed outside. How can I solve this issue?

[Satheesh Kumar Balasubramanian]

Hi Techlandandyzhang,

You can refresh the tab in splitter resizing event to resolve this issue.

https://stackblitz.com/edit/angular-tab-inside-splitter-resize?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json

https://ej2.syncfusion.com/angular/documentation/api/splitter#resizing

https://ej2.syncfusion.com/angular/documentation/api/tab#refresh

app.component.html:

<div id="target" class="control-section default-splitter">

  <div class="pane1">

    <div id="pane-heading">Horizontal Splitter</div>

    <ejs-splitter

      #horizontal

      height="510px"

      separatorSize="4"

      width="700px"

      (resizing)="onResizing($event)"

    >

      <e-panes>

        <e-pane size="50%" min="60px">

          <ng-template #content> </ng-template>

        </e-pane>

        <e-pane size="50%" min="60px">

          <ng-template #content>

            <ejs-tab #tab id="tab_keyboard_interaction" overflowMode="Popup">

            </ejs-tab>

          </ng-template>

        </e-pane>

      </e-panes>

    </ejs-splitter>

  </div>

</div>

app.component.ts:

@Component({

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styleUrls: ['app.component.css'],

  encapsulation: ViewEncapsulation.None,

})

export class AppComponent {

  @ViewChild('tab') tab: TabComponent;

  // Mapping Tab items Header property

  public headerText: Object = [

    { text: 'HTML' },

    { text: 'C-Sharp(C#)' },

    { text: 'Java' },

    { text: 'VB.NET' },

    { text: 'Xamarin' },

    { text: 'ASP.NET' },

    { text: 'ASP.NET MVC' },

    { text: 'JavaScript' },

  ];

  public onResizing(args: ResizingEventArgs): void {

    this.tab.refresh();

  }

}

Regards,

Satheesh Kumar B

[techlandandyzhang]

Hi Satheesh,

I've added a resizing event to the ejs-splitter element and it's now functional. However, when I use the headerTemplate in ejs-tab, the refresh feature no longer works. do you have any solutions?

[Satheesh Kumar Balasubramanian]

Hi Techlandandyzhang,

You can refresh the tab indicator and toolbar overflow in tab created event to resolve this issue.

https://stackblitz.com/edit/angular-tab-inside-splitter-resize-efsofr?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json

https://helpej2.syncfusion.com/angular/documentation/api/tab/#refreshactivetabborder

https://helpej2.syncfusion.com/angular/documentation/api/tab/#created

https://helpej2.syncfusion.com/angular/documentation/api/toolbar#refreshoverflow

app.component.html:

<div id="target" class="control-section default-splitter">

  <div class="pane1">

    <div id="pane-heading">Horizontal Splitter</div>

    <ejs-splitter

      #horizontal

      height="510px"

      separatorSize="4"

      width="700px"

      (resizing)="onResizing($event)"

    >

      <e-panes>

        <e-pane size="50%" min="60px">

          <ng-template #content> </ng-template>

        </e-pane>

        <e-pane size="50%" min="60px">

          <ng-template #content>

            <ejs-tab

              #tab

              id="tab_keyboard_interaction"

              overflowMode="Popup"

              (created)="onCreated($event)"

            >

              <e-tabitems>

                <e-tabitem *ngFor="let item of headerText">

                  <ng-template #headerTemplate>

                    <div style="display:flex;position:relative">

                      <div>{{ item.text }}</div>

                    </div>

                  </ng-template>

                </e-tabitem>

              </e-tabitems>

            </ejs-tab>

          </ng-template>

        </e-pane>

      </e-panes>

    </ejs-splitter>

  </div>

</div>

app.component.ts:

  public onCreated(args: void) {

    setTimeout(() => {

      let toolbarObj = (document.querySelector('.e-toolbar') as any)

        .ej2_instances[0];

      toolbarObj.refreshOverflow();

      let tabObj = (document.querySelector('.e-tab') as any)

        .ej2_instances[0] as any;

      tabObj.refreshActiveTabBorder();

    }, 50);

  }

Regards,

Satheesh Kumar B

[techlandandyzhang]

I tested the demo example you provided and found an issue, which still exists.

https://stackblitz.com/edit/angular-tab-inside-splitter-resize-efsofr?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json

[Satheesh Kumar Balasubramanian]

Hi Techlandandyzhang,

You can refresh the tab indicator and toolbar overflow in splitter resizing event to resolve this issue.

https://stackblitz.com/edit/angular-tab-inside-splitter-resize-efsofr?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata-source.ts

app.component.ts:

@Component({

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styleUrls: ['app.component.css'],

  encapsulation: ViewEncapsulation.None,

})

export class AppComponent {

  @ViewChild('tab') tab: TabComponent;

  // Mapping Tab items Header property

  public headerText: Object = [

    { text: 'HTML' },

    { text: 'C-Sharp(C#)' },

    { text: 'Java' },

    { text: 'VB.NET' },

    { text: 'Xamarin' },

    { text: 'ASP.NET' },

    { text: 'ASP.NET MVC' },

    { text: 'JavaScript' },

  ];

  public onResizing(args: ResizingEventArgs): void {

    let toolbarObj = (document.querySelector('.e-toolbar') as any)

      .ej2_instances[0];

    toolbarObj.refreshOverflow();

    this.tab.refreshActiveTabBorder();

  }

  public onCreated(args: void) {

    setTimeout(() => {

      let toolbarObj = (document.querySelector('.e-toolbar') as any)

        .ej2_instances[0];

      toolbarObj.refreshOverflow();

      let tabObj = (document.querySelector('.e-tab') as any)

        .ej2_instances[0] as any;

      tabObj.refreshActiveTabBorder();

    }, 50);

  }

}

Regards,

Satheesh Kumar B

[techlandandyzhang]

There is still an issue where using the "display: flex" style doesn't work when I try to add other elements to the right of a tab.

https://stackblitz.com/edit/angular-tab-inside-splitter-resize-rrge5u?file=src%2Fapp.component.html,src%2Fapp.component.ts

<ng-template #content>

            <div style="display: flex; justify-content: space-between; overflow: hidden">

              <div [id]='DargArea'>

                <ejs-tab #tab

                id="tab_keyboard_interaction"

                overflowMode="Popup"

                [allowDragAndDrop]='true'

                [dragArea]="'#' + DargArea"

                (created)="onCreated($event)"

                (dragged)="onDragged($event)">

                  <e-tabitems>

                    <e-tabitem *ngFor="let item of headerText">

                      <ng-template #headerTemplate>

                        <div style="display:flex;position:relative">

                          <div>{{ item.text }}</div>

                        </div>

                      </ng-template>

                    </e-tabitem>

                  </e-tabitems>

                </ejs-tab>

              </div>

              <div>Other Element</div>

            </div>

          </ng-template>

[Satheesh Kumar Balasubramanian]

Hi Techlandandyzhang,

You can set width for elements inside flex container and remove the overflow style from flex container div to resolve the reported issue.

https://stackblitz.com/edit/angular-tab-inside-splitter-resize-qqkjuy?file=src%2Fapp.component.html,src%2Fapp.component.css

app.component.html:

<div id="target" class="control-section default-splitter">

  <div class="pane1">

    <div id="pane-heading">Horizontal Splitter</div>

    <ejs-splitter

      #horizontal

      height="510px"

      separatorSize="4"

      width="700px"

      (resizing)="onResizing($event)"

    >

      <e-panes>

        <e-pane size="50%" min="60px">

          <ng-template #content>

            <button (click)="onAddClick($event)">add</button>

            <button (click)="onRemoveClick($event)">remove</button>

          </ng-template>

        </e-pane>

        <e-pane size="50%" min="60px">

          <ng-template #content>

            <div style="display: flex; justify-content: space-between;">

              <div style="width:80%" [id]="DargArea">

                <ejs-tab

                  #tab

                  id="tab_keyboard_interaction"

                  overflowMode="Popup"

                  [allowDragAndDrop]="true"

                  [dragArea]="'#' + DargArea"

                  (created)="onCreated($event)"

                  (dragged)="onDragged($event)"

                >

                  <e-tabitems>

                    <e-tabitem *ngFor="let item of headerText">

                      <ng-template #headerTemplate>

                        <div style="display:flex;position:relative">

                          <div>{{ item.text }}</div>

                        </div>

                      </ng-template>

                    </e-tabitem>

                  </e-tabitems>

                </ejs-tab>

              </div>

              <div style="width:20%">Other Element</div>

            </div>

          </ng-template>

        </e-pane>

      </e-panes>

    </ejs-splitter>

  </div>

</div>

Regards,

Satheesh Kumar B