Question

I’m stuck with something that I imagined would be quiet simple 🙂

Floating two panels next to each other and keeping them centered.
The closest I have gotten is to center the panels but ontop of each other.

like so:

         _
        |_|
         _
        |_|

I’m trying to get

         _   _
        |_| |_|

This is my file so far

Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
      //this is just a simply panel with html:'abcde"
         'App.view.Portal1'

      ],
items:[{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
},{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
}]
});

Any ideas? All are welcome 🙂 … thanks in advance

Update:
The closest i’ve come to a “solution” is the following: (however it requires a set width)

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
          layout:'fit',
    items:[{
        layout:{
            type:'vbox',
            align:'center'
        },
        items:[{
            layout:{
                type:'hbox',
            },
            //Set width :(
            width:800,
            items:[{
                xtype:'portal1',
            },{
                xtype:'portal1',
            }]
        }]

    }]
});

Solution

Thanks to those who commented. Here is a working solution. Dont use layout:fit on the wrapper panel

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
    style:{
        textAlign:'center'
    },
    items:[{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    },{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    }]
});

Answer 1

A CSS only solution, since I don’t know extjs:

Give each panel the appropriate horizontal margins so they don’t run together. Set their width and height as normal. Then set display: inline on the panels as well. Finally, set the containing element to use text-align: center. You may need to introduce a new container element for this purpose.