Problem with tab

[matteo]

Hi, my name is Matteo.

I have a problem with Tab.

I'm trying to put a scrollable Tab in a modal dialog.

First thing, the tab doesn't take the width, and is displayed out of modal.

If i resize the browser, the tab takes right width, but it doesn't display scroll arrows.

How can i fix this?

[Ravikumar Venkatesan]

Hi Matteo, 

Greetings from Syncfusion support. 

We have validated your reported query based on your shared details by adding the tab inside the dialog. But, we are unable to reproduce the problem at our end and the sample that can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-tab-inside-the-dialog-sample?file=app.component.ts 

Kindly try the above sample and if you still facing the same problem share the below details to serve you better. 

• Share the full code that illustrates the problem or
• Reproduce the problem in the above-shared sample or
• Share a sample that illustrates the problem which would help us to proceed further.

Regards, 

Ravikumar Venkatesan 

[matteo]

Thanks, but this doesn't fit my problem.

I send two screenshots of my situation.

When i load the modal, the tab extis from parent div, but if i resize the browser, it starts work fine.

Attachment: screenShots_70042040.zip

[Ravikumar Venkatesan]

Hi Matteo, 

Thanks for the details. 

We have validated your reported problem “When I load the modal, the tab exists from parent div” based on your shared snips by changing the selected index of the Tab and adding a text area inside the Tab. But, we are unable to reproduce the problem that you are facing and we did not found any selected tab item in your shared snips and all tab headers are seen to be not selected. We have prepared a working sample for your reference that can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-tab-inside-the-dialog-sample-llxuev?file=app.component.ts 

Kindly try the above sample and if you still facing the same problem kindly share the below details to serve you better. 

• Share the issue reproducing code with the style customization you are done with it or
• Reproduce the problem in the above-shared sample or
• Share a sample that illustrates the problem which would help us to proceed further.

Regards, 

Ravikumar Venkatesan 

[matteo]

I think the problem is that i'm trying to load tab headers from translations using pipe expression.

"localize" manage translations, and i don't want to load from component.

                    <ejs-tab id="MyElement" overflowMode="Scrollable" scrollStep="200" contentLoad="init" #MyElement>

                        <e-tabitems>

                            <e-tabitem class="tab-container tabbable-line" [header]="{{'FiscalCountry' | localize}}">  

       <div class="form-group">

                                        <label for="Surname" *ngIf="useName()">{{"Surname" | localize}} *</label>

                                        <label for="Surname" *ngIf="!useName()">{{"BusinessName" | localize}} *</label>

                                        <input id="Surname" #surnameInput="ngModel" type="text" name="Surname" [(ngModel)]="item.surname" required maxlength="250">

                                        <validation-messages [formCtrl]="surnameInput"></validation-messages>

                                    </div>

                            </e-tabitem>

                        </e-tabitems>

                    </ejs-tab>

[Ravikumar Venkatesan]

Hi Matteo, 

Thanks for the update. 

We have validated your reported problem “When I load the modal, the tab exists from parent div” based on your shared details. But, we are unable to reproduce the problem at our end and it works as expected. For the same, we have prepared a sample that can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-tab-inside-the-dialog-pipe-expression-sample?file=app.component.html 

Kindly try the above sample and if you still facing the same problem share the below details to serve you better. 

• Share the full code that related to the tab with the CSS style customization or
• Reproduce the problem in the above-shared sample or
• Share a sample that illustrates the problem which would help us to proceed further.

Regards, 

Ravikumar Venkatesan 

[matteo]

Hi, I have seen the example you sent to me and i reproduced the error.

I send you the sample.

I see the difference is my pipe function return a string and not ad object.

It is possible to solve the problem in app.component.html file?

Attachment: example_f9b24268.zip

[matteo]

I was also able to reproduce the first problem i've mentioned on 2nd March, when i said 

<<the tab doesn't take the width, and is displayed out of modal.>>

Attachment: example2_f71e6aac.zip

[Ravikumar Venkatesan]

Hi Matteo, 

Thanks for the update. 

We have validated your reported problem at our end. When using the pipe expression inside the header ng-template, the piper expression is executed after the initial rendering of the Tab(In the initial rendering the Tab pipe expression is not executed. So, the width of the tab header is less than the Dialog content width) due to this, the header texts are changing after the initial rendering of the Tab. So, we suggest you to assign the header text of the tab directly to the header property of the e-tabitem to resolve this problem and for the same, we have prepared a sample that can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163125/ze/ej2-angualr-tab-with-pipe-expression-1843821571 

 

[app.component.html] 

  <ejs-dialog #template [animationSettings]="animationSettings" [showCloseIcon]="showCloseIcon" [height]="height" 

    [target]="target" [width]="width"> 

    <ng-template #content> 

      <div class="dialogContent"> 

        <ejs-tab id="adaptiveTab" #adaptiveTab> 

          <e-tabitems> 

            <ng-template ngFor let-data [ngForOf]="datas" let-i="index"> 

              <e-tabitem [header]="data.FiscalCountry | localize"> 

                <ng-template #content> 

                  <div *ngIf="data.Surname == 'Surname - 1'"> 

                    Name <input type="text"> 

                    Surname<input type="text"> 

                    Country<input type="text"> 

                    Telephone number<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 2'"> 

                    Notes 2<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 3'"> 

                    Notes 3<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 4'"> 

                    Notes 4<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 5'"> 

                    Notes 5<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 6'"> 

                    Notes 6<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 7'"> 

                    Notes 7<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 8'"> 

                    Notes 8<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 9'"> 

                    Notes 9<input type="text"> 

                  </div> 

                  <div *ngIf="data.Surname == 'Surname - 10'"> 

                    Notes 10<input type="text"> 

                  </div> 

                </ng-template> 

              </e-tabitem> 

            </ng-template> 

          </e-tabitems> 

        </ejs-tab> 

      </div> 

    </ng-template> 

    <ng-template #header> 

      <div id="dlg-template" title="Tab" class="e-icon-settings">Tab</div> 

    </ng-template> 

  </ejs-dialog> 

[app.component.ts] 

export class AppComponent { 

  constructor() { } 

 

  @ViewChild("template") public Dialog: DialogComponent; 

  @ViewChild("ButtonInstance") public dlgbtn: ButtonComponent; 

  @ViewChild("adaptiveTab") public tabObj: TabComponent; 

 

  public showCloseIcon: Boolean = true; 

  public target = ".control-section"; 

  public animationSettings: AnimationSettingsModel = { effect: "None" }; 

  public height = "60%"; 

  public width = "60%"; 

 

  public datas = [ 

    { FiscalCountry: { text: "Country - 1" }, Surname: "Surname - 1", Businessname: "Businessname - 1" }, 

    { FiscalCountry: { text: "Country - 2" }, Surname: "Surname - 2", Businessname: "Businessname - 2" }, 

    { FiscalCountry: { text: "Country - 3" }, Surname: "Surname - 3", Businessname: "Businessname - 3" } 

  ]; 

 

  public BtnClick = (): void => { 

    this.Dialog.show(); 

  } 

 

  public localize = true; 

} 

[localePipe.ts] 

import { Pipe, PipeTransform } from "@angular/core"; 

 

@Pipe({ 

  name: "localize" 

}) 

export class LocalizePipe implements PipeTransform { 

  transform(value: any, isLocalize: boolean = true): any { 

    if (value === "") { 

      return { text: "" }; 

    } 

    if (isLocalize) { 

      return { text: "Localized " + value.text }; 

    } 

    return { text: value.text }; 

  } 

} 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[matteo]

I tried, but didnt' works.

I think my problem is pipe.

Your function returns an object, but i really can't do this.

I use that pipe in other part of my application, and it have to return string.

How can works with strings?

Attachment: localePipe_9757ef6c.zip

[Ravikumar Venkatesan]

Hi Matteo, 

Thanks for the update. 

We have validated your reported problem “When I load the modal, the tab exists from parent div” at our end and confirm this as a defect at our end. We have logged the bug report which can be tracked through the following feedback link. The fix will be included in the patch release scheduled for the first week of April 2021 and would appreciate your patience until then. 

Feedback: https://www.syncfusion.com/feedback/23490/tab-inside-the-dialog-with-ng-template-for-the-tab-header-the-scrollable-button-in 

Kindly let us know if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Ravikumar Venkatesan]

Hi Matteo, 

Thanks for the patience. 

We have validated your reported problem “When I load the modal, the tab exists from parent div” at our end and resolved it in the sample end by refreshOverflow method of the Toolbar used in the Tab and for the same, we have prepared a sample for your reference which can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-tab-inside-the-dialog-pipe-expression-sample-g1y8he?file=app.component.ts 

 

[app.component.ts] 

export class AppComponent implements AfterViewChecked { 

  constructor() {} 

 

  ngAfterViewChecked() { 

    if (this.tabObj) { 

      setTimeout(function() { 

        (document.querySelector("#adaptiveTab .e-toolbar") as any).ej2_instances[0].refreshOverflow(); 

      }, 40); 

    } 

  } 

} 

API(Toolbar refreshOverFlow method): https://ej2.syncfusion.com/angular/documentation/api/toolbar#refreshoverflow 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan