[HELPED] How to <center> a table?

[mwmayer4]

I've tried to figure out how to center a table inside a card layout, but no luck.
The closest I got was in buildItems, to add a container, make it a vbox layout and put the table inside of it.. gotta be an easier, cleaner way.

Ext.define('ProductionOnly.view.Viewport', {
    extend: 'Ext.container.Viewport',
	requires: ['ProductionOnly.view.ProdGrid002', 
               'ProductionOnly.view.ProdGrid008', 
               'ProductionOnly.view.ProdGrid009'],
	initComponent: function() {
		var me = this;
		Ext.apply(me, {
			layout: 'card',
			items: me.buildItems()
		});
		me.callParent(arguments);
	},
	buildItems: function() {
		return [{
			layout: {
				type: 'table',
				columns: 3
			},
			defaults: {
				width: '310',
				frame: true
			},
			items: [{
				xtype: 'prodgrid002',
				title: 'BRISTOL PRODUCTION',
				margin: 10
			}, {
				xtype: 'prodgrid008',
				title: 'GRACEVILLE PRODUCTION',
				margin: 10
			}, {
				xtype: 'prodgrid009',
				title: 'BROOKHAVEN PRODUCTION',
				margin: 10
			}]
		}];
	}
});

[eweiler]

Maybe use flex instead of width?

I think that now if your container was 1200 wide, then your grids would still only be 310 X 3 + 40 (for margin) which is 970

[mwmayer4]

i tried flex: 1 on each item, but then it ignored the width: 310 and expanded each grid to fit a table width of, I guess, 100%

[mwmayer4]

i'm guessing that there is some config property where i need to put this:
margin-left:auto;
margin-right:auto;
just can't figure out which is the lucky winner.

[eweiler]

If you use a hbox or vbox layout, and config it for pack: 'center' then it will center the components in it.

So, since you want your grids to have a fixed width, you could leave that on and try using an hbox layout so that it is centered.

You could use CSS for centering objects as well, but I don't think it would be with auto margins on the left and the right.

[mwmayer4]

i tried hbox & vbox... when i used pack: 'center', all the items are on top of each other.. and still on the left side of the page..

[eweiler]

Did you change your table type layout to hbox, set the pack in the layout config, and set stretch as align (or give height to the grids)??

Right now, your grids are in a panel which is in a viewport. The viewport has card layout, which may not be needed since there is only one object. So it is essentially a fit layout for your purpose. (Card inherits from Fit.)

If you try a suggestion, and the code change doesn't fix it, post up the code change so we know what you did!

[mwmayer4]

got it ! I changed it from card to hbox and did pack center, i left the widths on each item.. I didn't want align: stretch because i wanted each grid box size to be the size of the data.. doing stretch with hbox made it fill up the page with plenty of empty space in each box..

thanks!