CODEWITHSUNDEEP
extjsextjs4sencha-touch
Vikas Hire
Vikas Hire

Reputation: 628

How to align Radio buttons at left side in Touch Sencha?

Is there any solution for align these radio buttons at left side. here is sample sencha touch code you can run it on sencha fiddle

Ext.application({
    name : 'Fiddle',

    launch : function() {
      var form = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'radiofield',
            name : 'color',
            value: 'red',
            label: 'Red',
            labelAlign: 'right',
            checked: true
        },
        {
            xtype: 'radiofield',
            name : 'color',
            value: 'green',
            label: 'Green'
        },
        {
            xtype: 'radiofield',
            name : 'color',
            value: 'blue',
            label: 'Blue'
        }
    ]
});
    }
});

here is 3 radio buttons. First one I am trying to set at left side and want to set it's label align at right side. I did that by using config option labelAlign: 'right' But you can see in design, there is label getting set at right side, but component not getting sets at left side. I don't know why this adding padding at the left side. I tried lots stuffs for this but unable to resolve this issue. have you any suggestion/solution on this issue?

enter image description here

you can see above image there is space after I setting label as right. That space I don't want.

Upvotes: 0

Views: 961

Answers (1)

Alexander
Alexander

Reputation: 20224

The HTML/CSS source says reason for radio box on right is:

.x-field.x-body-align-end > * > .x-body-el {
    align-items: flex-end;
}

The ExtJS Field source says body-align-... class is set here:

updateBodyAlign: function(bodyAlign, oldBodyAlign) {
    var element = this.element;

    if (oldBodyAlign) {
        element.removeCls(Ext.baseCSSPrefix + 'body-align-' + oldBodyAlign);
    }

    if (bodyAlign) {
        element.addCls(Ext.baseCSSPrefix + 'body-align-' + bodyAlign);
    }
},

So I tried in fiddle:

bodyAlign: 'start',

and it works.

Upvotes: 2

Related Questions