1. #1
    Ext User
    Join Date
    Sep 2007
    Posts
    2
    Vote Rating
    0
    Renaissance2K is on a distinguished road

      0  

    Default Centering Toolbar Items

    Centering Toolbar Items


    Hello, everyone.

    Hopefully, a simple question: is there any quick-and-dirty way to center the content of a Toolbar?

    It's left-flush by default, and right-flush if you add a fill. Is there any way to center it?

    I've used Firebug to inspect the HTML code that the Toolbar scripts create and tried most of the basic centering tools (display:block and margin:auto, text-align:center, align=center, etc.), but they all seem to be overwritten by the flush-left alignment unless I add a greedy spacer.

    I didn't expect this to work, but I also added a second greedy spacer to the other side. Sure enough, no luck.

    I'd hardcode margins, but the area that the toolbar is being placed in is relative to the window size, so it would not adjust accordingly.

    Thank you very much.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    myToolbar.getEl().child("table").wrap({tag:'center'})

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    36
    Vote Rating
    0
    JKralicky is on a distinguished road

      0  

    Default Thank you!

    Thank you!


    Animal,
    Thank You! I was just trying to figure this out today as well!

    Joe

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    2
    Vote Rating
    0
    Renaissance2K is on a distinguished road

      0  

    Default


    There is no Dr. Cox quote in existence to describe my appreciation.

    Thank you very much. Worked like a charm.

  5. #5
    Ext User
    Join Date
    Sep 2007
    Posts
    20
    Vote Rating
    0
    mbalusu is on a distinguished road

      0  

    Default Centering Toolbar Items

    Centering Toolbar Items


    Animal, thanks much! I was actually looking for this as well!!

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Posts
    32
    Vote Rating
    0
    Gil Hananya is on a distinguished road

      0  

    Default Same problem but different

    Same problem but different


    Hi,

    I have a upper toollbar in a panle. The only element i have in the tollbar is a combo box.
    I tried to center the combo box the way you explain. It works on firefox but in IE only the combo box is centered but the combo-list is not. The <center> does not effect the list.

    Am i doing something wrong??

  7. #7
    Ext User
    Join Date
    Jul 2008
    Location
    Huntington, WV
    Posts
    11
    Vote Rating
    0
    tzankoff is on a distinguished road

      0  

    Default


    I think it only affects the box. The list of items inside the combo box itself do not have any way of aligning that I am aware of.

  8. #8
    Sencha User
    Join Date
    Oct 2008
    Location
    Germany
    Posts
    2
    Vote Rating
    0
    MPulxeR is on a distinguished road

      0  

    Default


    You can use flex-config as placeholder to center elements in your toolbar ... in Ext 4:

    Code:
    dockedItems: [{
       xtype: 'toolbar',
       dock: 'bottom',
       ui: 'footer',
       items: [
         { xtype: 'component', flex: 0.5 },
         { xtype: 'button', text: 'Button 1'},
         { xtype: 'component', flex: 0.5 }
       ]
    }]

  9. #9
    Sencha User
    Join Date
    Apr 2010
    Location
    Toronto
    Posts
    36
    Vote Rating
    1
    Chao is on a distinguished road

      1  

    Default


    Quote Originally Posted by MPulxeR View Post
    You can use flex-config as placeholder to center elements in your toolbar ... in Ext 4:

    Code:
    dockedItems: [{
       xtype: 'toolbar',
       dock: 'bottom',
       ui: 'footer',
       items: [
         { xtype: 'component', flex: 0.5 },
         { xtype: 'button', text: 'Button 1'},
         { xtype: 'component', flex: 0.5 }
       ]
    }]
    actually with Ext4 you can do this to center the items in the toolbar:
    Code:
    layout : {
    	type : 'hbox',
    	pack : 'center'
    }

  10. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    onechannel is on a distinguished road

      0  

    Default


    can you use div tags to align it centre
    Tool for 1channel movie watching site