1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Tab content element with class

Tab content element with class

Found that when a class is set on a tab content element, it breaks the tabs.


Original example that Syncfusion supplied to a forum thread:

Rn5kw4 (forked) - StackBlitz


Forked example but with a class added to each tab content element:

Tab content with class (stackblitz.com)


It looks like when the tab content element gets initialized, the 'e-item' class gets appended on to whatever class is already set on the tab content element ("tabBodye-item" instead of "tabBody e-item").  This breaks the functionality of the tabs.


6 Replies
SK Satheesh Kumar Balasubramanian Syncfusion Team August 4, 2021 09:22 AM UTC

Hi Josh, 
  
Thanks for using Syncfusion Products. 
  
We have validated your reported query "Found that when a class is set on a tab content element, it breaks the tabs." and could reproduce the reported issue at our end. Can you please share more details like purpose of class which set on a tab content element in your application and use case scenario to validate and provide solution? 

Regards, 
Satheesh Kumar B 


JB Josh Borgerding August 4, 2021 09:58 AM UTC

I'm initializing my tabs using HTML elements, but then programatically hiding / showing tabs after a dropdownlist selection based on data-* attributes in the tab content elements and the index of said element in all of the tab content elements.  I'm able to work around it but found it to be an odd behavior and thought it should be fixed.


SK Satheesh Kumar Balasubramanian Syncfusion Team August 5, 2021 01:27 PM UTC

Hi Josh, 
  
Thanks for your update. 
  
We have validated your reported query "Found that when a class is set on a tab content element, it breaks the tabs." and suggest you to use space at the end of class name to resolve the reported issue. For the same we have modified the sample for your reference which can be viewed from the following link. 
  
  
index.html:  
<div id="tabContainer"> 
<div class="e-tab-header"> 
<div><span id="tabHeaderIdea">Tab1</span></div> 
<div><span id="tabHeaderProject">Tab2</span></div> 
</div> 
<div class="e-content"> 
<div class="tabBody ">...content tab 1</div> 
<div class="tabBody ">...content tab 2</div> 
</div> 
</div> 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


JB Josh Borgerding August 5, 2021 07:26 PM UTC

That works, just like another work around that I was able to use.  But you guys are going to fix the issue in a future release, correct?


NR Nevitha Ravi Syncfusion Team August 6, 2021 01:14 PM UTC

Hi Josh, 

Thanks for you update. 

Yes we will provide fix for this bug ‘providing class for content element breaks’ at our end in our patch release scheduled on end of August 2021. You can track the status through the following link. 

Regards, 
Nevitha 


SK Satheesh Kumar Balasubramanian Syncfusion Team August 31, 2021 11:37 AM UTC

Hi Josh, 
  
Thanks for your patience. 
  
We are glad to announce that our weekly patch release v19.2.56 has been rolled out successfully. The reported bug with providing class for content element breaks has been fixed in this release. As a result, we recommend you to upgrade to the latest version of our Syncfusion package in order to avail this fix. 
  
  
Kindly check the reported defect in the latest version and get back to us if you need any further assistance. 
  
Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon