1. #1
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default Unanswered: Horizontal align Component in Container

    Unanswered: Horizontal align Component in Container


    Hi Guys,

    Can anyone give me a hint, how to align a component horizontal to the right in a container? I´ve tried different ways but didn´t get it to work.

    I need two columns where the items in the left column are aligned to the left and the items in the right columns are aligned to the right:
    Code:
    ...
    xtype: 'container',
                layout: 'hbox',
                items: [{
                    xtype: 'label',
                    text: 'Michael Fürst (m.fuerst@wolkenkraft.com)',
                    flex: 1
                },{
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    align:'right',
                    // THIS ITEM SHOULD BE ALIGNED RIGHT:
                    items: [{
                        xtype: 'label',
                        text: 'Text'
                    }]
    ....
    Thanks & Ciao,
    Mike

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Answers
    3549
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    layout : {
        type : 'hbox',
        pack : 'end'
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default


    Thanks for your answer, but it had no effect. I also changed the bg color of the container to see, if it´s spread completely to the right - and it is. So I´ve no idea where the problem could be at the moment. I also changed to column layout - no difference...

    Code:
    items: [{
                xtype: 'container',
                layout: 'column',
                items: [{
                    xtype: 'label',
                    text: 'Text align left)',
                    columnWidth: 0.5
                },{
                    xtype: 'container',
                    layout: 'hbox',
                    columnWidth: 0.5,
                    pack:'end',
    
                    style: {
                        background: '#ff0000'
                    },
                    items: [{
                        xtype: 'label',
                        text: 'Test align right'
                    }

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

Thread Participants: 2

Tags for this Thread