Dynamic Div Centering

[nealbrandi]

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]

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]

Thanks Jason - This worked great!