Почему labelWidth: 'auto' скрывает радиополе?
Я пытаюсь обернуть label из radiofield, но я не хочу устанавливать фиксированные width и labelWidth из-за отзывчивости представления. Но когда я устанавливаю labelWidth на авто, input element скрывается.
Я что делаю неправильно? Спасибо.
Добавьте приведенный ниже код в функцию запуска скрипта sencha и выберите в раскрывающемся списке Ext JS 6.5.3.57 - Triton [Modern].
Ext.create('Ext.Panel', {
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [
{
xtype: 'panel',
//flex: 1,
//height: 100,
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},
items: [
{
xtype: 'radiofield',
flex: 3,
//width: '100%',
label: 'afglngfsdlgkdslfkjsdlfkjdslkfjdslfkjsdlfkjsdlkfjsdlkfjsdlkfjdslkfjsdlkfjsdlkfjdslkfjldskfjsldkfjlsdkfjlsdkfjlsdkfjlsdkfjlkdsjflsdkjflsdkjflsdkjflsdkjflsdkjfklslfkdfjsldfk',
labelAlign: 'right',
labelWrap: true,
labelWidth: 'auto',
style: 'word-wrap: break-word;',
name : 'color',
value: 'red',
checked: true
},
{
xtype: 'textfield',
flex: 1,
margin: '0 0 0 10'
}
]
}
]
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
labelWraptrue, чтобы этикетка обернулась. Если установлено значение false, метка будет усечена многоточием.
Свойство CSS word-wrap определяет, разрешено ли браузеру разрывать строку в словах, когда слово слишком длинное, чтобы поместиться в его контейнер.
Вот FIDDLE, я создал демку. Я надеюсь, что это поможет / направит вас в достижении ваших требований.
КОД СНОВА
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},
items: [{
xtype: 'radiofield',
flex: 3,
label: 'afglngfsdlgkdslfkjsdlfkjdslkfjdslfkjsdlfkjsdlkfjsdlkfjsdlkfjdslkfjsdlkfjsdlkfjdslkfjldskfjsldkfjlsdkfjlsdkfjlsdkfjlsdkfjlkdsjflsdkjflsdkjflsdkjflsdkjflsdkjfklslfkdfjsldfk',
labelAlign: 'right',
labelWidth: 'auto',
name: 'color',
value: 'red',
checked: true
}, {
xtype: 'textfield',
placeHolder: 'example',
flex: 1,
margin: '0 0 0 10'
}, {
xtype: 'radiofield',
flex: 1,
label: 'The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.',
labelAlign: 'right',
labelWrap: true,
labelWidth: 'auto',
name: 'color',
value: 'red'
}]
}]
});
}
});
Да, я видел с ExtJS 6.5.x. Вход скрыт, когда мы устанавливаем labelWidth: 'auto'. Так что это может быть фреймворк или нужно проверить детали. В настоящее время какая версия используется?
последний. 6.5.3.57.
если вы установите его в процентах, он работает, например, labelWidth: '95%'. Но это выглядит не очень хорошо.
Да, я пробовал в своем рабочий пример. если я посмотрю, это тоже хорошо. Можете ли вы предоставить снимок экрана, где, по вашему мнению, выглядит не очень хорошо?
это зависит от устройства. если вы используете инструменты разработчика в google chrome, проверьте это с помощью nexus 7. Когда вы устанавливаете его в процентах, пространство, занимаемое меткой, зависит от ширины устройства.
Хорошо, попробуйте этот labelWidth: 'calc(100% - 22px)', Пожалуйста, обратитесь к этому FIDDLE
Я попробую и дам тебе знать. Спасибо, Нерендра.
Конечно, надеюсь, это вам поможет :)
ваше исправление labelWidth: 'calc(100% - 22px)' сработало. пожалуйста, обновите свой ответ.
Вы пробовали свой код с использованием Ext JS 6.5.3.57 - Triton [Modern]? Вы увидите, что фактический элемент ввода скрыт. Очевидно, это еще одна ошибка сенчи.