How to leave checkbox field alignment in sencha touch 2?

Question

I'm just wondering if anyone managed to successfully leave — align the check box inside the set of fields; my attempts do not work.

{ xtype : 'checkboxfield', name : 'remember', label : 'Store information', style: 'float: left' } 

The image is better:

Answer 1

I was able to align checkboxfield to left . Check out the code below ...

  { xtype: 'checkboxfield', name : 'tomato', value: 'tomato', checked: true, label: 'Tomato', labelWidth: '70%', labelAlign: 'right' } 

Conclusion: -

Answer 2

Here's checkboxfield default css (touch 2.2.1): `

 .x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after { position: absolute; top: 0; right: 10px; bottom: 0; content: '3'; font-family: 'Pictos'; font-size: 1.6em; text-align: right; line-height: 1.6em; } 

`

you can change "right: 10px" to "left: 10px".

in my application, I put this css code in index.html

 .x-checkmark-base, .x-field-checkbox .x-field-mask::after, .x-field-radio .x-field-mask::after, .x-select-overlay .x-item-selected.x-list-item::after { right:auto !important; left:10px !important; } 

Answer 3

paste into your css

following:

 .x-field .x-input-checkbox::after, .x-field .x-input-checkbox:checked::after { right:auto; }