Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

xtype Selection dropdown width

Avatar

Level 4

We are finding a lot of usability issues with the default width of dialog widgets.  We have been using:

anchor="" width="160"

...for various other components including text inputs and color pickers.  This does not work for selection dropdown.

1 Accepted Solution

Avatar

Correct answer by
Level 10

You can set the width of a dropdown in a custom xtype when you declare the  CQ.form.Selection object using the new operator. See this code:

 this.allowField = new CQ.form.Selection({
            type:"select",
            autoWidth: false,
            width: 700,

            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });
        this.add(this.allowField);

This code results in:

[img]DropDownWIdth.png[/img]

For those reading this thread and wanting to know how to develop a custom xtype in a CQ component -- see: 

http://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

You can set the width of a dropdown in a custom xtype when you declare the  CQ.form.Selection object using the new operator. See this code:

 this.allowField = new CQ.form.Selection({
            type:"select",
            autoWidth: false,
            width: 700,

            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });
        this.add(this.allowField);

This code results in:

[img]DropDownWIdth.png[/img]

For those reading this thread and wanting to know how to develop a custom xtype in a CQ component -- see: 

http://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

Avatar

Level 4

Thanks.  This was a good clue, but does not work in a tabpanel > panel > fieldset dialog.xml config