Centering Toolbar Items

[Renaissance2K]

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.

[Animal]

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

[JKralicky]

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

Joe

[Renaissance2K]

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

Thank you very much. Worked like a charm.

[mbalusu]

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

[Gil Hananya]

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??

[tzankoff]

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.

[MPulxeR]

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

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

[Chao]

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

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:

layout : {
	type : 'hbox',
	pack : 'center'
}

[onechannel]

can you use div tags to align it centre