Dropdown field in dialog appears shrinked in size

[askdctm]

Hi All,

Details as below :

We have an issue wherein a dropdown field of type="select" and xtype="selection" with allowBlank="false", defaultValue="6" and itemId="sample" is there.

And itemId is used in one of the listener to show/hide this particular dropdown in the dialog.

Due to this, the dropdown is not appearing properly in the dialog and appearing as seen in the screenshot.

Any thoughts/solution on how to resolve this , will be really helpful.

[askdctm]

Hi All,

Also, remember having heard somewhere that "layoutOnTabChange" property comes in handy to resolve this issue.

Any idea on where this property is to be used/reference links/pointers on this. Our component dialog has two dialogfieldset in a single tab. One of them has pathfield in it. The other has

#1] textfield

#2] xtype=selection based on which (#3 or #4 is displayed)

#3] a multifield of xtype="pathfield"(of type path is displayed)

#4] xtype = selection having a set of hardcoded dropdown values.

[askdctm]

HI All,

Any thoughts on this will be helpful.

[kautuk_sahni]

Hi 

Please try to use this component, and see if behavior still persist:

Link:- https://helpx.adobe.com/experience-manager/using/dialog_fields_servlets.html

~kautuk

[askdctm]

Hi Kautuk,

Thank you for your reply. But looks like its not helping.

[askdctm]

Hi All,

Any thoughts on this will be helpful.

[askdctm]

Hi All,

Any thoughts on the above will be helpful.

[askdctm]

Hi All,

Any thoughts on this will be helpful.

[kautuk_sahni]

Hi

Can you please share :

1. What happen when you install the package "https://helpx.adobe.com/experience-manager/using/dialog_fields_servlets.html". Is it also showing same shrieked Drop-down ? what is the behavior of this ?

2. If the problem is only coming because of even-handler, could you please share the code for it ?

3. What exactly is the use-case of this event handler? If it is for populating the drop-down then please follow the link shared in point 1. 

4. Any browser console error or in error.log ?

~kautuk

[askdctm]

Hi Kautuk,

Details as below :

#1]Yes, it shows the same shrieked drop-down.[Even without this implementation the values come up in the drop down, but it appears shrinked]

#2 and #3] Yes, it is happening because of "itemId" present as part of the dialog. If this is removed, it works fine. However, we are using this in a listener to show/hide dropdown.

#4] No specific errors observed.

[kautuk_sahni]

askdctm wrote...

Hi Kautuk,

Details as below :

#1]Yes, it shows the same shrieked drop-down.[Even without this implementation the values come up in the drop down, but it appears shrinked]

#2 and #3] Yes, it is happening because of "itemId" present as part of the dialog. If this is removed, it works fine. However, we are using this in a listener to show/hide dropdown.

#4] No specific errors observed.

Ok, then please share the code for Listener. How are you implementing it. 

~kautuk

[askdctm]

Hi Kautuk,

Additional supporting documents.

dropdown here is the dropdown being referred to [type="select" ,xtype="selection", itemId="custom"

In listeners, var Source = dialog.getComponent('custom'); is used and based on certain conditions Source.show(); and Source.hide() is called.

[askdctm]

Uploading dialog strcuture

[edubey]

Hi,

I have seen this issue while working with classic UI. Can you set autoWidth = true

Thanks

[kautuk_sahni]

Hi 

The way you have implemented it, it would have worked. You may like to try what Praveen suggested.

Or

Please have a look at this example:- 

Link:- http://localhost:4502/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownsh...

// Extension to the standard dropdown/select component. It enabled hidding/unhidding of other components based on the selection made in the dropdown/select.

How to use:
 *
 * - add the class cq-dialog-dropdown-showhide to the dropdown/select element
 * - add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element, value should be the
 *   selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
 * - add the target class to each target component that can be shown/hidden
 * - add the class hidden to each target component to make them initially hidden
 * - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select
 *   option that will unhide this element.
 */

Reference Link, which might help you achieve able stated:- http://adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/

Thanks and Regards

Kautuk Sahni

[askdctm]

Hi Praveen/Kautuk,

Thank you for your reply. Will check on this and keep you posted.

[AnkurAhlawat]

I tried to create a dropdown with given configuration type="select" and xtype="selection" with allowBlank="false", defaultValue="6" and itemId="sample" is there. on vanilla instance and it is working fine. Could you please share the listener code and json of your dialog where you are implemention this dropdown.

You can get json by using http://localhost:4502/<path-to-dialog>.-1.json

[askdctm · Accepted solution]

Hi All,

Thank you for your reply.

Was using selectionchanged event and the function "function(comp, val, isChecked){..} in the listener. Here in one of the conditions was checking if(val!=''). Removed this condition and it seems to be working ok for now.