How to enable scroll to a Tree attached in a layout?


#1
                   <style>
                    .dhx_sample-container {
                            width: 100%;
                    }
                    .dhx_layout-cell-content {
                            width: 100%;
                            height: 500px;
                            overflow-y: auto;
                            overflow: visible;
                    }

                    .dhx_tree {
                            overflow: scroll;
                    }
                    .custom-class .dhx_tabbar-tab-button--active {
                            background-color: rgb(2, 136, 209);
                            color: white;
                    }
                    .custom-class .dhx_tabbar-header-active {
                            background-color: #ff5252;
                    }
                   </style>

    </head>
    <body>
            <header class="dhx_sample-header">
                    <div class="dhx_sample-header__main">                                
                    </div>
            </header>
            <section class="dhx_sample-container">
                    <div class="dhx_sample-container__widget" id="tabbar_container"></div>
                    <div id="layoutObj" style="position: relative; width: 600px; height: 400px;"></div>
            </section>

            <script>

                 var tabbar = new dhx.Tabbar("tabbar_container", { mode: "top",
                                  tabWidth: 400,
                                  tabHeight: 50,
                                  css: "dhx_widget--bordered custom-class",
                                  views:[
                                            { id: "1", tab: "Prod Servers"},
                                            { id: "2", tab: "Test Servers"},
                                            { id: "3", tab: "Dev Servers"}
                                        ]
                                  });

                    tabbar.setActive("2");
                    var myTestLayout = new  dhx.Layout(null, {
                                     gravity:true,
                                    css: 'dhx_layout-cell-content',
                                    cols: [
                                            {  id: "TestTree", header: "Test Servers", width: "25%" },
                                            {  id: "TestTreeDetails",header: "Test Server Backup Details",width: "75%" }
                                          ]
                        });
                    tabbar.getCell("2").attach(myTestLayout);
                    var myTestLayoutTree = new dhx.Tree(null,{
                            icon: {
                                    folder: "fa fa-server",
                                    openFolder: "fa fa-server",
                                    file: "fa fa-tv"
                                  },
                               css: 'dhx_tree',
                            });
                        myTestLayoutTree.data.load("./TestTreeData.json");
                        myTestLayout.getCell("TestTree").attach(myTestLayoutTree);

            </script>
    </body>

That tree is not scrolling inside layout


#2

Please, try to add the following css on your page:

.dhx_layout-cell--resizeble{

overflow-y:auto;

}

Here is the example:
https://snippet.dhtmlx.com/1u1l1u7x