Поле флажка Sencha Touch имеет необычную разметку с длинной этикеткой - PullRequest
Новая
       0

Поле флажка Sencha Touch имеет необычную разметку с длинной этикеткой

4 голосов
/ 09 июня 2011

В моем приложении длинные метки для пары полей-флажков, и, к сожалению, это вызывает странное поведение.

screenshot

Есть ли способ сделать это немного лучше? Я имею в виду, если я «коснусь» серой области, флажок не активируется (даже если флажок находится внутри серой области) ... но вместо этого я должен щелкнуть белую область. Это просто сбивает с толку.

Даже если я установлю labelWidth: '80%' для каждого checkboxfield, слова все еще будут переноситься и показывать эту маленькую серую область. Я бы предпочел, чтобы эта область была полностью белой и была бы «сенсорной», чтобы активировать флажок.

Ответы [ 5 ]

5 голосов
/ 21 июня 2011

У меня та же проблема, я нашел 3 способа ее исправить, выбрать лучший способ для вас, я использую 3-ю версию. Извините, мой английский не самый лучший, надеюсь, это будет понятно: (

1-е решение: Вы можете добавить пользовательские записи CSS. Это решит проблему, но если вы смените тему, это может быть неправильно. 

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

2-е решение: Вы можете использовать переполнение скрыто, но в этом случае текст на конце будет обрезан. 

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

РЕДАКТИРОВАТЬ

от rockinthesixstring

Вот модификация, которую я сделал для достижения тех же результатов.

CSS 

.x-checkbox{ background:white;}

JS 

{
    xtype: 'checkboxfield',
    name: 'updateinfo',
    label: 'Update my info',
    labelWidth: '80%',
    cls: "x-checkbox"
}
1 голос
/ 28 июня 2012

Ни один из этих ответов на самом деле не делает интерактивным все вертикальное пространство области флажка.Вам нужно указать фиксированную высоту для содержащего элемента 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 не могут принять 100% -ную высоту своих родительских DIV, когда любой из их родителей имеет неопределенную высоту.Вы должны убедиться, что все DIV имеют высоту либо от тела вниз, либо от DIV с фиксированной высотой вниз.

1 голос
/ 19 января 2012

Проблема в настройке фона заключается в том, что вы просто исправляете это на уровне дисплея. Функционально элемент ввода по-прежнему будет иметь небольшую высоту. Поэтому нам действительно нужно растянуть высоту элемента ввода.

Вот исправление, которое работает в моем случае. Добавить стили 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'
});
0 голосов
/ 09 апреля 2012

Вы также можете добавить стиль в сам элемент 

defaults: {
                    xtype: 'textfield',
                    required: true,
                    useClearIcon: true,
                    autoCapitalize: false,
                    style: 'font-size: 0.8em; background: white;',
                },
0 голосов
/ 21 июня 2011

Когда я столкнулся с этой проблемой, я установил фиксированную ширину (в пикселях) и фиксированную ширину метки (в пикселях). Обычно мне просто удавалось отрегулировать ширину этикетки. Попробуйте использовать фиксированную ширину вместо процентов.

...