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
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
6 Answers, 1 is accepted
0
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
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

RAV44
Top achievements
Rank 2
answered on 10 Sep 2013, 04:35 PM
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
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
0
Hi Raúl,
Dimo
Telerik
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.
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

RAV44
Top achievements
Rank 2
answered on 11 Sep 2013, 04:22 PM
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:
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.
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
;
}
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.
0
Hi Raúl,
In this way the height style, which are applied via external CSS code will work.
Regards,
Dimo
Telerik
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

RAV44
Top achievements
Rank 2
answered on 12 Sep 2013, 02:18 PM
Yeah that work!
Thanks,
Raúl Arias
Thanks,
Raúl Arias