Tab underline too wide

[Severin Spoerri]

Hello!

I have the problem that the underline of the selected tab on opening is too wide.

After first navigation, the underline then displays correctly.

The tabs are initialized using the template syntax like so:

I am currently using: 

   "dependencies": {

      "@angular/animations": "~9.1.3",

      "@angular/cdk": "^9.2.1",

      "@angular/common": "~9.1.3",

      "@angular/compiler": "~9.1.3",

      "@angular/core": "~9.1.3",

      "@angular/forms": "~9.1.3",

      "@angular/platform-browser": "~9.1.3",

      "@angular/platform-browser-dynamic": "~9.1.3",

      "@angular/router": "~9.1.3",

      "@ngneat/transloco": "^2.17.0",

      "@syncfusion/ej2-angular-buttons": "^18.1.42",

      "@syncfusion/ej2-angular-calendars": "^18.1.42",

      "@syncfusion/ej2-angular-dropdowns": "^18.1.42",

      "@syncfusion/ej2-angular-grids": "^18.1.53",

      "@syncfusion/ej2-angular-inputs": "^18.1.42",

      "@syncfusion/ej2-angular-lists": "^18.1.42",

      "@syncfusion/ej2-angular-navigations": "^18.1.42",

      "@syncfusion/ej2-angular-notifications": "^18.1.42",

      "@syncfusion/ej2-angular-popups": "^18.1.42",

      "@syncfusion/ej2-notifications": "^18.1.42",

      "angular-in-memory-web-api": "^0.9.0",

      "rxjs": "^6.5.5",

      "tslib": "^1.11.1",

      "zone.js": "^0.10.3"

   },

Thank you very much for your most appreciated help.

[Ravikumar Venkatesan]

Hi Severin, 

Greetings from Syncfusion support. 

We have validated your reported problem “Tab underline too wide” at our end.  We can able to reproduce the issue that you have reported. We had logged the defect report at our end and the fix will be included in our Volume 2 main release which is scheduled on June 19, 2020. You can track this defect status in the below feedback link. We appreciate your patience. 

Feedback: https://www.syncfusion.com/feedback/14836/in-the-initial-rendering-of-the-tab-the-selected-item-border-is-set-to-too-long 

Please get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Severin Spoerri]

Dear Ravikumar Venkatesan

Has this issue been resolved jet? I updated my versions of all syncfusion dependencies to 18.2.44 and the problem is still there.

I also deleted package.lock.json and reinstalled via npm.

best,

Severin

[Vengatesh Maniraj]

Hi Severin, 

Sorry for the inconvenience caused. 

We have resolved your reported issue in the sample end with the help of the created event and setActiveBorder method of the tab like the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.html] 

<div class="control-section e-tab-section"> 

  <div class="e-sample-resize-container"> 

    <!-- Render the Tab Component --> 

    <ejs-tab id="tab_default" #tabObj (created)="tabCreated()"> 

      <e-tabitems> 

        <e-tabitem *ngFor="let tab of tabItems" disabled="{{tab.disabled}}"> 

          <ng-template #headerText> 

            <div>{{header(tab.header)}}</div> 

          </ng-template> 

          <ng-template #content> 

            <div>{{tabContent()}}</div> 

          </ng-template> 

        </e-tabitem> 

      </e-tabitems> 

    </ejs-tab> 

  </div> 

</div> 

 [app.component.ts] 

   

public tabCreated(): void { 

    setTimeout(() => (this.tabObj as any).setActiveBorder(), 100); 

  } 

Sample: https://stackblitz.com/edit/ej2-angular-tab-selected-item-border-width-is-wrong-gv91pl?file=app.component.ts  

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Vengatesh  

[Severin Spoerri]

Thank you very much for you help!

[Vengatesh Maniraj]

Hi Severin, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh