Tabs showing all tabs content

[Paulo Ferreira Pinto]

First time I enter my page all tabs contents are displayed but only the first tab is selected. I want only the first tab content to be displayed.

Attachment: Indexcshtml_382ec672.zip

[Ram Raju Elaiyaperumal]

Hi Paulo,

Thank you for reaching out with your query. From the information you've provided, it appears that you're seeing all tab contents displayed when you first enter your page, even though only the first tab is selected.

 Based on the sample you've provided, we've attempted to reproduce the issue, but the functionality seems to be working as expected. On the UI, only the content of the first tab is displayed when the first tab is selected.

 We would like to clarify whether you're seeing all the tab content displayed on the UI, or if you're observing this in the DOM tree. By default, all tab content will be present in the DOM tree, but only the selected tab's content will be visible on the UI.

 If you would like the elements to be rendered in the DOM tree only when the corresponding tab is selected, you can use the loadOn property and set its value to dynamic. This will ensure that the tab content is only rendered in the DOM tree when the tab is selected.

Here's an example of how you can set this property:

<ejs-tab id="adaptiveTab" height="250px" width="auto" created="tabCreated" overflowMode="Scrollable" selected="onSelect" loadOn="Dynamic">

 

                <e-tab-tabitems>

                    <e-tab-tabitem header="headerText0" content="#contentGeral" selected class="e-item"></e-tab-tabitem>

                    <e-tab-tabitem header="headerText1" content="#contentDadosFiscais" class="e-hide"></e-tab-tabitem>

                    <e-tab-tabitem header="headerText2" content="#contentFerias" class="e-hide"></e-tab-tabitem>

                </e-tab-tabitems>

            </ejs-tab>

 

For your convenience we have prepared a sample, kindly check on the attached sample.

 

Regards,

Ram

Attachment: Ej2CoreAppTabinsideform_(2)_89fb5843.zip

[Paulo Ferreira Pinto]

Thank you for your answer.

You example works great but my code still have the same behaviour.

I send you my _layout.cshtml, where I have a Toolbar in the top, a sidebar on the left (_SideBar.cshtml) and in the main is where is displayed the body and in this case where it's called the index.cshtml with the tab.

Do you think that this behaviour it's because the page it's called inside the _layout.cshtml?

Thanks,

Paulo Pinto

Attachment: _Layout_b043d2c3.zip

[Ram Raju Elaiyaperumal]

Hi Paulo,

Thank you for your response and for sharing additional details about your issue.

We have attempted to replicate the issue using the sidebar and layout cshtml files in our sample, but we were unable to reproduce the behavior you described. Please refer to the attached sample for your reference.

If the issue persists, we would appreciate further information to help us understand the problem better. A video demonstrating the issue would be particularly helpful. Alternatively, you could try to replicate the issue using the sample we've shared. This would allow us to pinpoint the cause of the problem more accurately.

We appreciate your patience and cooperation as we work to resolve this issue.

Regards,

Ram

Attachment: Ej2CoreAppTabinsideform_(2)_15ec25b3.zip