How to position layout to center of screen?


#1

How to position layout to center of screen? I want to make it smaller then viewport, and centered. Here is a style I try:

html, body {
width: 90%; /provides the correct work of a full-screen layout/
max-width: 1000px;
height: 100%; /provides the correct work of a full-screen layout/
overflow: hidden; /hides the default body’s space/
margin: auto; /hides the body’s scrolls/
}


#2

dhtmlxLayout can be attached to an html-body or some container.
In both cases dhtmlx layout takes the postion and the sizes of its parent container.


#3

I already attached layout to body, and style of body above. Layout takes the width of body but position is top-left of window. Here is code part:

dhtmlxEvent(window,“load”,function(){
var myLayout = new dhtmlXLayoutObject(document.body,“2U”);

Everything else, including other layouts are attached to that layout.


#4

but position is top-left of window.

because this is the position of the html body.


#5

I thought “width: 90%;margin: auto” should make it at centre. Ok, there are another ways to do it


#6

Still not found a way. I known how to center element by javascript, but then I have to do it for all windows, not only layout.
How to style it to be at center, together with other dhtmlx items, when with of body below 100% and max-width for body take place?
I’m trying to make it work on tablets and pc, that’s why limiting width, also don’t like how it look at pc wide screen at full width.


#7

I done it, post here in case somebody else need it.
Its not possible to use body not 100% and centred layout. Instead make div, position it, and cteate topmost layout on top of this div. Here are code snippets:

.content {
	width: 90%;
	height: 100%;
	overflow: hidden;
	margin: auto;
}
> <body>
>   <div class="content" id="content"></div>
>   <script>
>       $("#content").height($(window).height()-15);
> ...
>   dhtmlxEvent(window, "load", function() {
>     var myLayout = new dhtmlXLayoutObject("content", "2U");
> }
> </script>