Making the Manager the size of the browser window

Sometimes you want to create an application that spans the whole browser window - and maybe even resizes with it. It is fairly easy to accomplish that using vegui, we simply have to tinker some with the attributes of manager node.

All we need to do is have our manager node take control of the body instead of building a new element for itself. Well almost.. there are a couple things that we need to do beforehand

Now, if your page only holds the vegui application we will need to make sure the body node itself spans the page. This is because the body node will only be as high as it needs to be, and it ignores absolute positioned elements. Its width will be at 100% but its height will be small unless there are enough static positioned nodes in it that resize it naturally. In order to force 100% height on the body node you can simply set the property via css



Also since we are forcing the size of the body node we do not need vegui to adjust its size, so we turn the feature off by setting the ADJUST_BODY_SIZE variable to false.



Now we would normally build the manager and have it create a new element for itself. This time we want it to take control of the body element. Be aware that for this to work the body element needs to exist in the document already, so do this after the body tag or best when the page is done loading.



The first argument is null, meaning it will not attempt to dock the node after taking it over, since we dont need that. The second argument is true and tells the function to take over the body node instead of creating a new element. That's it :)

The manager element now should be controlling the body node. Be aware the some template properties will be applied to it if they are set, but properties such as css position, zindex, width, height and position will be ignored.

Related Posts

• vegUI Tutorial 19 - Using vegUI on a generic website

---

Your Comment

name:*
email-address:
Are you human?

Comments

No comments yet.

---