tabstip with treeview: treeview breaking out of tabstrip

[Henk Jelt]

Hi

Does anybody have any experience with using a treeview in  a tabstrip?

I am loading a dynamically loaded treeview in a tabstrip, but when I unfold an option in the treeview , the treeview breaks out of the tabstrip.
Is there a way to have a scroll bar in the tabstrip or in the treeview?

Thanks for helping me out!

Henk Jelt

[Dimo]

Hello Henk Jelt,

Normally the TabStrip content wrappers (div.k-content) have no explicit height. The observed problem is possible to occur if they have pixel height and the content cannot fit. In order to enable scrolling, please use

.k-tabstrip > .k-content
{
        overflow: auto ;
}

On the other hand, the TreeView has the above style applied by design, so if you set an explicit height to its wrapper (div.k-treeview), a scrollbar will appear if needed.

Regards,
Dimo
the Telerik team

[RAV44]

Hi 

The same problem is happening to me, I'm also loading a treeview dinamically but when I change from tab to tab, it setup some styles that appears to be by default
including height: auto, and this is causing that the treeview breaks out from the tabstrip. I already did what Dimo suggest but it's happening anyway.

Could you help me with this?

Thanks,

Raúl Arias

[Dimo]

Hi Raúl,

It is not clear how is you scenario different from the already resolved one and why setting overflow:auto to the TabStrip content containers does not work. Please elaborate what your scenario is.

Generally, height:auto is the default height for all block-level elements, but Kendo UI does not enforce such a style to TabStrip or TreeView elements.

Regards,
Dimo
Telerik

[RAV44]

Hi, 

Yeah sorry I wasn't very clear, my scenario is the following:

I'm using ASP.NET MVC 4.0 and I'm using Kendo's Tabstrip to display a tree-view on each tab, so when I first load the page, the tree-view is perfect and doesn't breaks out from the tab, but when I change tabs, it loads via Ajax the tree view from the other tab, and when this happens, it apply these styles in line:

element.style{
height: auto; 
opacity: 1; 
overflow: auto;
}

and this makes the tree-views break out from the tab strip, 

Currently a found a temporally fix for this but is not the solution I'm looking for. I fixed it making a resize of the tree view on the Select Event.
But I'm looking for a way to fix this that only require CSS style or some configuration on the helpers on the server side, without making an event for this.

[Dimo]

Hi Raúl,

My previous reply was not completely accurate - when expand animation is used, the TabStrip does enforce an auto height style to the content containers. Please disable TabStrip animation or use a fade animation.

.Animation(an => an.Enable(false))

.Animation(an => an.Open(open => open.Fade(FadeDirection.In)))

#TabstripID  .k-content
{
    height: 300px;
    overflow: auto;
}

In this way the height style, which are applied via external CSS code will work.

Regards,
Dimo
Telerik

[RAV44]

Yeah that work!

Thanks,

Raúl Arias