tabstip with treeview: treeview breaking out of tabstrip

7 posts, 0 answers
  1. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. RAV44
    RAV44 avatar
    4 posts
    Member since:
    Jul 2013

    Posted 10 Sep 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. RAV44
    RAV44 avatar
    4 posts
    Member since:
    Jul 2013

    Posted 11 Sep 2013 Link to this post

    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{
    heightauto; 
    opacity: 
    1
    overflowauto;
    }
    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.

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. RAV44
    RAV44 avatar
    4 posts
    Member since:
    Jul 2013

    Posted 12 Sep 2013 Link to this post

    Yeah that work!

    Thanks,

    Raúl Arias
Back to Top
Kendo UI is VS 2017 Ready