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

我的应用程序中有几个checkboxfields的长标签，不幸的是，它导致了一些奇怪的行为

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

---

即使我将

labelWidth:'80%'

设置为每个

checkboxfield

，单词仍然会自动换行，并显示出那个小灰色区域。我希望该区域全部为白色，并且所有区域都可以“触摸”以激活复选框。

我有一个相同的问题，我找到了3种解决方法，为您选择最佳方式，我使用第3个版本。对不起，我的英语不是最好的，我希望它可以理解：(

第一种解决方案： 您可以添加自定义css条目。这将解决问题，但如果更改主题，则可能是错误的

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

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

.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',
        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
        }]
    }]
});

JS

---

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

设置背景的问题是，您只是在显示级别上进行了调整。从功能上来说，输入元素的高度仍然很小。因此，我们实际上需要拉伸输入元素的高度

这是在我的情况下有效的修复方法。 添加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应用程序中的元素，如下所示：

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

---

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

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

---

所有这些答案实际上都无法使复选框区域的整个垂直空间都可单击。您需要的是为包含的div指定一个固定的高度，并为其所有子项指定100%的高度（哦，好吧，如果您想深入并仅将其应用于所需的div，您也可以这样做，但惰性方式很好）.我的意思是：

JS

CSS

---

当然，如果您希望的话，这不会动态更改label+复选框的高度。因此，这不是一个完整的解决方案，但我敢打赌，在大多数情况下，它会符合您的要求。之所以这样做有效，是因为子div不能假设其父div的100%高度，而它们的任何父div都有未指定的高度。您必须这样做确保所有DIV都有一个从主体向下的高度，或者从一个固定高度向下的DIV。

你引导我走上正确的道路。我更新了你的答案，有趣地显示了我的“修改”，只需设置

.x-input-checkbox{background:white；}

不起作用固定宽度的问题是，当用户旋转手机时，它不是液体。

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

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

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

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