PDA

View Full Version : Dynamic Div Centering



nealbrandi
28 Feb 2012, 7:31 AM
I'm trying to build a core frame for a website with multiple pages. I'm using Designer 2.0 with Ext Js 4.1 beta.

I drag a Viewport and then a Container on to the canvas. I set the Container's properties as follows:
- layout: card
- width: 960
- margin: 0, auto
- padding: 0

I then place 5 panels in the container and a toolbar with 5 buttons. The toolbar is intended to act as the navigation bar. I set the toolbar's properties as follows:
- align: top
- margin: 40
- style: border-radius: 4px

I save and deploy. Problems:

1. The primary problem is the Container is not centered in the viewport. My intent is to have the Container act as a classic wrapper div and use CSS margin property to center it.
2. What properties need to be set on the toolbar or container to cause the buttons to fill the bar?

I've searched docs and forums and have tried multiple combinations in Safari's Element tools. Any advice / guidance is greatly appreciated - thanks.

Thanks

jjohnston
28 Feb 2012, 3:18 PM
This is more of a general ExtJS question than a Designer question, but I'll take a quick swipe at it:

1) I'd try setting the viewport's layout to hbox or vbox and setting the layout's properties to align:middle and pack:center
2) Assuming you mean to have the buttons expand their width to fill the toolbar's width, I think you're looking for the 'flex' config on the buttons, like setting them all to flex:1

nealbrandi
3 Mar 2012, 1:00 PM
Thanks Jason - This worked great!