javascriptextjsextjs6-modernextjs6.5

Why labelWidth: 'auto' is hidding the radiofield?


I am trying to wrap the label of a radiofield but i don't want to set fixed width and labelWidth because of the responsiveness of the view. But when i set the labelWidth to auto the input element gets hidden.

Am I doing it wrong? Thanks.

Add the code below inside the launch function of a sencha fiddle and select Ext JS 6.5.3.57 - Triton [Modern] from the dropdown.

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

Solution

  • labelWrap true to allow the label to wrap. If set to false, the label will be truncated with an ellipsis.

    The CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its container.

    Here is FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.

    CODE SNIPPET

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