I am trying to attach a toolbar and status-bar on the top and bottom of the full screen Layout.
I use myLayout.attachStatusBar();. It is fine on the bottom of screen. but the similar way to attach a toolbar is failed. It shows a blank area on the top of screen. Here is my code:
@ViewBag.Title - My ASP.NET Application @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")<link rel="STYLESHEET" type="text/css" href="~/Content/DHX/dhtmlx.css">
<script type="text/javascript" src="~/Scripts/DHX/dhtmlx.js"></script>
<style>
html, body {
width: 100%; /*provides the correct work of a full-screen layout*/
height: 100%; /*provides the correct work of a full-screen layout*/
overflow: hidden; /*hides the default body's space*/
margin: 0px; /*hides the body's scrolls*/
}
</style>
<script type="text/javascript">
function doOnLoad() {
var myLayout = new dhtmlXLayoutObject({
parent: document.body,
pattern: "3W",
cells: [
{ id: "a", text: "Navigation", collapse: true },
{ id: "b", text: "Main Page" },
{ id: "c", text: "Links", collapse: true }
]
});
var myToolbar = myLayout.attachToolbar({
icons_path: "~/Content/DHX/imgs/",
xml: "/Data/Toolbar.xml"
});
var myStatusbar = myLayout.attachStatusBar();
}
</script>
<div id="main" style="display: none; position: relative; width: 100%; height: 100%; overflow: auto;">
@RenderBody()
</div>
Here is my test “Toolbar.xml” file:
<?xml version="1.0" encoding="utf-8" ?>As you can see from above code, I only reference the dhtmlx.css and dhtmlx.js. Did I miss something?