Results 1 to 3 of 3

Thread: Dynamic Div Centering

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Bethany CT, USA
    Posts
    7
    Vote Rating
    0
      0  

    Default Dynamic Div Centering

    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

  2. #2
    Sencha User jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    567
    Vote Rating
    21
      0  

    Default

    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
    Jason Johnston
    @lojjic
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Bethany CT, USA
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Thanks Jason - This worked great!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •