Sencha Touch复选框字段具有带长标签的时髦布局 [英] Sencha Touch checkboxfield has funky layout with long label

问题描述

我的应用程式中有几个checkboxfield的长标签，不幸的是它会造成一些奇怪的行为。

有没有什么办法让这看起来更好一点？我的意思是，如果我'触摸灰色区域，复选框不激活（即使复选框是在灰色区域内），但我必须单击白色区域。

即使我对 labelWidth：'80％' > checkboxfield ，单词仍然包裹并显示小灰色区域。

解决方案

我有一个可以触摸的区域，同样的问题，我找到3种方法来解决它，选择最好的方式为你，我使用第3版。对不起我的英语不是最好的，我希望它是可以理解的：（

第一个解决方案：
你可以添加自定义css条目， ，但如果您更改主题，可能会出错。

  .x-form-field-container {
背景：白色; 
} 
  

第二个解决方案：
可以使用overflow hidden ，但在这种情况下，文本将被截断。

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

第三个解决方案：

您可以在100％在这种情况下，输入字段的宽度也将为100％。

  new Ext.form.FormPanel（{
 title：'Form name'，
 scroll：'vertical'，
 items：[{
 xtype：'fieldset'，
 title：'Fieldset title'，
项目：[{
 xtype：'field'，
 html：'< div class =x-form-labelstyle =width：100％>< span& < / div>'
}，{
 xtype：'selectfield'，
 name：'nameOfTheField'
 // attribute 
}] 
}] 
}）; 
  

EDIT

_{由rockinthesixstring}

这是为了获得相同结果而进行的修改。

CSS

  .x-checkbox {background：white;} 
  

$ b b

JS

  {
 xtype：'checkboxfield'，
 name：'updateinfo' 
 label：'Update my info'，
 labelWidth：'80％'，
 cls：x-checkbox
} 
  

I've got long labels for a couple checkboxfields in my app, and unfortunately it causes some strange behavior.

Is there any way to make this look a little better? I mean, if I 'touch' the gray area, the checkbox does not activate (even if the checkbox is inside the gray area)... but instead I have to click the white area. It's just kinda confusing.

Even if I set labelWidth: '80%' to each checkboxfield, the words still wrap and show that little gray area. I'd rather that area be all white and all of it be 'touchable' to activate the checkbox.

解决方案

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

1st solution: You can add custom css entry. It will fix the problem, but if you change the theme, it could be wrong.

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

2nd solution: You can use overflow hidden, but it this case the text on end will be cutted.

.x-form-label {
    overflow: hidden;
}

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

3rd solution:

You can use your label with 100% width before the field. In this case the input field's width will 100% too.

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

_{by rockinthesixstring}

Here's the modification that I made in order to achieve the same results.

CSS

.x-checkbox{ background:white;}

JS

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

这篇关于Sencha Touch复选框字段具有带长标签的时髦布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！