Sencha Touch checkboxfield具有带有长标签的时髦布局

Question

我的应用程序中有几个复选框的长标签，不幸的是它会导致一些奇怪的行为。

有没有办法让这个看起来好一点？我的意思是，如果我'触摸'灰色区域，复选框不会激活（即使复选框位于灰色区域内）...但我必须单击白色区域。这有点令人困惑。

即使我将labelWidth: '80%'设置为每个checkboxfield，单词仍然会换行并显示该灰色区域。我宁愿那个区域都是白色的，所有这些都可以“触摸”来激活复选框。

Answer 1

我有同样的问题，我找到了3种方法来解决它，为你选择最好的方法，我使用的是第3版。对不起，我的英语不是最好的，我希望这是可以理解的:(

第一个解决方案： 您可以添加自定义css条目。它将解决问题，但如果你改变主题，那可能是错误的。

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

第二个解决方案： 你可以使用溢出隐藏，但在这种情况下，文本将被剪切。

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

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

第3个解决方案：

您可以在字段前使用100％宽度的标签。在这种情况下，输入字段的宽度也将是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
        }]
    }]
});

编辑

_{by rockinthesixstring}

这是我为了达到相同结果所做的修改。

CSS

.x-checkbox{ background:white;}

JS

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

Answer 2

设置背景的问题在于您只是在显示级别上修复此问题。在功能上，输入元素仍然具有较小的高度。所以我们实际上需要拉伸输入元素的高度。

这是我的案例中正在解决的问题。 添加CSS样式：

.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;
}

将“x-input”类分配给Sencha app中的元素，如下所示：

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

Answer 3

这些答案实际上都没有使复选框区域的整个垂直空间可以点击。你需要的是为包含的div指定一个固定的高度，为它的所有孩子指定100％的高度（哦，好吧，如果你想深入挖掘并只将它应用到你需要的div，你可以这样做也是，但懒惰的方式工作正常）。这就是我的意思：

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;
}

当然，如果你想要的话，这不会动态地改变标签+复选框的高度。所以这不是一个完整的解决方案，但我敢打赌它在大多数情况下都能满足您的需求。这有效的原因是因为当父母的任何父母身高不明确时，儿童DIV不能假设他们的父DIV高度为100％。你必须确保所有DIV的高度都来自BODY on down，或者来自DIV的高度固定高度。

Answer 4

当我遇到这个问题时，我设置了固定的宽度（像素）和固定的labelWidth（像素）。通常只是调整标签宽度对我有用。尝试使用固定宽度而不是百分比。

Answer 5

您还可以在元素本身中添加样式

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