Sencha Touch checkboxfield has a funky layout with a long label

Question

I have long shortcuts for the checkboxfields pair in my application, and unfortunately this causes some weird behavior.

Is there any way to make this look a little better? I mean, if I “touch” the gray area, the checkbox is not activated (even if the checkbox is inside the gray area) ... but instead I have to click on the white area. This is just confused.

Even if I set labelWidth: '80%' for each checkboxfield , the words still wrap and show that there is a small gray area. I would prefer the area to be white, and all this was a “touch” to activate the checkbox.

Answer 1

I have the same problem, I found 3 ways to fix it, choose the best way for you, I use version 3. Sorry, my English is not the best, I hope this will be clear :(

1st solution: You can add a custom css entry. This will fix the problem, but if you change the subject, it may be wrong.

 .x-form-field-container { background: white; } 

Second solution: You can use the overflow hidden, but in this case the text will be completed.

 .x-form-label { overflow: hidden; } .x-form-label span { white-space: nowrap; } 

The third solution:

You can use your label with 100% width in front of the field. In this case, the width of the input field will also be 100%.

 new Ext.form.FormPanel({ title: 'Form name', scroll: 'vertical', items: [{ xtype: 'fieldset', title: 'Fieldset title', items: [{ xtype: 'field', html: '<div class="x-form-label" style="width:100%"><span>This is the label of the field in below</span></div>' },{ xtype: 'selectfield', name: 'nameOfTheField' //without label attribute }] }] }); 

EDIT

_{from rockinthesixstring}

Here is a modification I made to achieve the same results.

CSS

 .x-checkbox{ background:white;} 

Js

 { xtype: 'checkboxfield', name: 'updateinfo', label: 'Update my info', labelWidth: '80%', cls: "x-checkbox" } 

Answer 2

The problem with setting the background is that you just fix it at the display level. Functionally, the input element will still have a low height. Therefore, we really need to stretch the height of the input element.

Here's a fix that works in my case. Add css styles:

 .x-form-label span { word-wrap: break-word; /*to avoid words that exceed length of the label*/ } .x-input { /* the fix was working even without this, but I'm leaving it here for more stability */ position: relative; } .x-input input { /*basically, the main 4 magic lines of the fix*/ position: absolute; height:100%; width: 70%; right: 0; /*for more reliability*/ top: 0; bottom: 0; } 

Assign the class "x-input" to an element in the Sencha application, for example:

 new Ext.form.Radio({ name: 'yourname', value: 'yourvalue', label: 'yourlabel', cls: 'x-input' }); 

Answer 3

None of these answers actually makes the entire vertical space of the checkbox area clickable. You will need to specify a fixed height for the containing div and a height of 100% for all your children (oh, well, if you want to dig and apply it only to the div you need, you can do it too, but the lazy way works fine). Here is what I mean:

Js

 { xtype: 'checkboxfield', id: 'YourIdHere', name : 'YourNameHere', label: 'Your Checkbox Label Here' } 

CSS

 #YourIdHere { max-height: 50px !important; height: 50px !important; } #YourIdHere div { height:100% !important; } 

Naturally, this will not lead to a dynamic change in the height of the label + flag, if you want it anyway. So this is not a complete solution, but I would put it in accordance with what you want in most cases. The reason this happens is because child DIVs cannot accept the 100% growth of their parent DIVs when any of their parents have an undefined height. You must ensure that all DIVs are from BODY down or from a DIV with a fixed height down.

Answer 4

When I ran into this problem, I set a fixed width (pixels) and a fixed width label (pixels). Usually just adjusting the width of the label worked for me. Try using a fixed width instead of a percentage.

Answer 5

You can also add style to the element itself.

 defaults: { xtype: 'textfield', required: true, useClearIcon: true, autoCapitalize: false, style: 'font-size: 0.8em; background: white;', },