Problem with toolbar in modern skin

Hi, iam trying use layout + tabbar + toolbar + grid and iam having one problem, i guess is something with css but i cant found a solution. Here is my problem.

            dhxLayout = new dhtmlXLayoutObject("content", "2E");
            dhxLayout.cells("a").hideHeader();
            dhxLayout.cells("b").hideHeader();

            dhxTabbarTop = dhxLayout.cells("a").attachTabbar();
            dhxTabbarTop.setImagePath("../Scripts/dhtmlx_pro_full/imgs/");
            dhxTabbarTop.setSkin("modern");
            dhxTabbarTop.addTab("a1", "Tab 1-1", "100px");
            dhxTabbarTop.setTabActive("a1");

            toolbarObjTop = dhxTabbarTop.cells("a1").attachToolbar();
            toolbarObjTop.setIconsPath("../Scripts/dhtmlx_pro_full/imgs/toolbar/icon_size/18/");
            toolbarObjTop.setSkin("dhx_skyblue");
            toolbarObjTop.addButton("open", 0, "", "open.gif", "open_dis.gif");
            toolbarObjTop.addButton("save", 1, "", "save.gif", "save_dis.gif");

            gridboxTop = dhxTabbarTop.cells("a1").attachGrid();
            gridboxTop.setImagePath("../Scripts/dhtmlx_pro_full/imgs/");
            gridboxTop.setHeader("Column A, Column B, Column B, Column B, Column B, Column B");
            gridboxTop.setInitWidthsP("20,20,20,20,20,20");
            gridboxTop.setColTypes("ro,ro,ro,ro,ch,ro");
            gridboxTop.setColSorting("str,str,str,str,str,str");
            gridboxTop.enableMultiselect(true);
            gridboxTop.setSkin("dhx_skyblue");
            gridboxTop.init();
            gridboxTop.loadXML("500.xml", function () { });

            dhxTabbarBottom = dhxLayout.cells("b").attachTabbar();
            dhxTabbarBottom.setImagePath("../Scripts/dhtmlx_pro_full/imgs/");
            dhxTabbarBottom.setSkin("dhx_skyblue");
            dhxTabbarBottom.addTab("a1", "Tab 2-1", "100px");
            dhxTabbarBottom.addTab("a2", "Tab 2-2", "100px");
            dhxTabbarBottom.setTabActive("a1");

            toolbarObjBottom = dhxTabbarBottom.cells("a1").attachToolbar();
            toolbarObjBottom.setIconsPath("../Scripts/dhtmlx_pro_full/imgs/toolbar/icon_size/18/");
            toolbarObjBottom.setSkin("dhx_skyblue");
            toolbarObjBottom.addButton("open", 0, "", "open.gif", "open_dis.gif");
            toolbarObjBottom.addButton("save", 1, "", "save.gif", "save_dis.gif");

            gridboxBottom = dhxTabbarBottom.cells("a1").attachGrid();
            gridboxBottom.setImagePath("../Scripts/dhtmlx_pro_full/imgs/");
            gridboxBottom.setHeader("Column A, Column B, Column B, Column B, Column B, Column B");
            gridboxBottom.setInitWidthsP("20,20,20,20,20,20");
            gridboxBottom.setColTypes("ro,ro,ro,ro,ch,ro");
            gridboxBottom.setColSorting("str,str,str,str,str,str");
            gridboxBottom.enableMultiselect(true);
            gridboxBottom.setSkin("dhx_skyblue");
            gridboxBottom.init();
            gridboxBottom.loadXML("500.xml", function () { });

This problem occur when i use modern skin in TABBAR and attach toolbar … without a toolbar the size of grid is ok.

Any solution?

Hi
If you use attachTabbar() method - tabbar receives the skin of the parent (“skyblue” in your case). When you set “modern” skin - it is going to be redefined and some styles can be broken.
We advise do not use “modern” skin in your case.