Results 1 to 4 of 4

Thread: Horizontal align Component in Container

  1. #1
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
      0  

    Default 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? Ive tried different ways but didnt 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 Frst (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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Code:
    layout : {
        type : 'hbox',
        pack : 'end'
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
      0  

    Default

    Thanks for your answer, but it had no effect. I also changed the bg color of the container to see, if its spread completely to the right - and it is. So Ive 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
      0  

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •