Need help with heightAdjustMode

[Ernesto Yoon]

Hello, I've search in all the tab threads and couldn't find an answer or sample about this.

I couldn't make the heightAdjustMode property to work. I saw the How To sample but I didn't understand exactly what are the different UI changes with the different modes.

I have a Dialog component with a Tab component as content. The problem is that the dialog content is scrolling (with tab headers included), and I just want the content of the tab (which is larger than the dialog's height)  to scroll. I set the tab component height to 100% but didn't work at content level. So I started playing with this heightAdjustMode property without luck.

One sample I found in another Tab thread that you provided (Syncfusion sample) have a very simple tab with content.

I modified it by setting a height to the Tab and start playing with the different modes, and I couldn't see any change at all (I tried making the first tab content three times bigger).

Could you please provide an example of the property?

I want to see how to set a Tab component with at least one of their Tab content big enough to require scroll (scrolling only the tab content without including the headers)

Thank you,

Ernesto

[Ravikumar Venkatesan]

Hi Ernesto, 

Greetings from Syncfusion support. 

Could you please provide an example of the property? 

We have validated your above query at our end and we have checked your shared sample at our end and it contains the older version packages. We have modified your shared sample with the latest version of packages that illustrates how the heightAdjustMode property of the Tab works which can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-tab-content-height-adjust-mode-example?file=app.component.ts 

I just want the content of the tab (which is larger than the dialog's height)  to scroll 

We have validated your above requirement at our end and achieved it by setting up the heightAdjustMode property value as Fill with the below CSS style. For the same, we have prepared a sample that can be available from the below link. 

[app.component.html] 

<ejs-tab id="tab_default" heightAdjustMode="Fill" > 

</ejs-tab> 

[app.component.css] 

.e-content.e-lib.e-touch { 

  overflow: auto; 

} 

Sample: https://stackblitz.com/edit/ej2-angular-tab-with-scrollable-content?file=app.component.ts 

Kindly let us know if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Ernesto Yoon]

Thank you, I was able to make that work without having to update the component version.

As I mentioned in other thread, would be very helpful to have the online documentation properties showing from which version they work from.

Regards,

Ernesto

[Nevitha Ravi]

Hi Ernesto, 

Thanks for your Suggestion. 

The property heightAdjustMode is avail in older packages too but the property has issue so that it doesn’t work as expected in older version. The issue has been resolved in our latest versions. Please let us know if you need any further assistance. 

Regards, 

Nevitha