Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Dropdown field in dialog appears shrinked in size

Avatar

Level 9

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.

1 Accepted Solution

Avatar

Correct answer by
Level 9

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.

View solution in original post

17 Replies

Avatar

Level 9

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.

Avatar

Level 9

HI All,

Any thoughts on this will be helpful.

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 9

Hi Kautuk,

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

Avatar

Level 9

Hi All,

Any thoughts on this will be helpful.

Avatar

Level 9

Hi All,

Any thoughts on the above will be helpful.

Avatar

Level 9

Hi All,

Any thoughts on this will be helpful.

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 9

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.

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 9

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.

Avatar

Level 10

Hi,

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

Thanks

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 9

Hi Praveen/Kautuk,

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

Avatar

Level 7

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

Avatar

Correct answer by
Level 9

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.