Sencha Touch checkboxfield has funky layout with long label

问题

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.

回答1:

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

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

回答2:

The problem in setting the background is that you're just fixing this on the display-level. Functionally, the input element will still have the small height. So we actually need to stretch the height of the input element.

Here's the fix that is working 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 'x-input' class to the element in Sencha app, like this:

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

回答3:

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

{
    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 won't dynamically change the height of the label + checkbox, if somehow you want that. So it's not a complete solution, but I'd wager it'll fit what you want in most cases. The reason why this works is because child DIVs cannot assume 100% height of their parent DIVs when any of their parents have unspecified height. You have to make sure all DIVs have a height from either the BODY on down, or from a DIV with a fixed height on down.

回答4:

When I came across this issue I set a fixed width (pixels) and a fixed labelWidth (pixels). Usually just adjusting the label width worked for me though. Try using a fixed width instead of percent.

回答5:

You can also add style in the element itself

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

来源：https://stackoverflow.com/questions/6297495/sencha-touch-checkboxfield-has-funky-layout-with-long-label

标签

checkbox

sencha-touch