Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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