Centered Fixed Width presentation

nlarson

I've been fighting with scaling my UI effectively for a while now and for a number of reasons I have decided that a fixed width layout might be the best way to go for now.

What I am hoping to do is create a centered fixed width layout, similar to how Podio, LinkedIn, or FaceBook have designed their layouts. Basically I want to center the enter app (not a form) along these lines.

White Space=Variable | AwareApp=Fixed@1200px | White Space=Variable

Is this possible and/or advisable to just wrap the entire app in a fixed width centered div? I tried wrapping the entire <body> in a <div>, but as soon as the VP div loads my wrapper div is overruled.

Any suggestions?

aware_support

If you want mess around with this the place to start is the file AwareIM/Tomcat/webapps/AwareIM/startup.html

nlarson

that is where i started, but when the JS loads the VP it either overwrites or ignore my div. I can still see it in the source while inspecting, but seems to only have an impact before the VP loads. I'll try some more later this week, thanks.

nlarson

so with a little more testing is seems no matter what I do Aware inserts 2 divs immediately after the <body> tag; so my div gets pushed past the content instead of wrapping it. I am not very proficient with JavaScript, but looking through aware.js I see some likely suspects as to where this is happening.

Just messing about I also found that, the app seems to behave well when wrapped in an iframe, so I suspect dropping it in a div would be fine. I would go the iframe root, but that requires very carefully attention to be paid when configuring that layout.

Perhaps you would consider changing the scripts at some later date to insert following a specified element rather than the body.