Description

No scroll-bar is shown when there are more than 5 items in a drop-down list on the visualizer page which makes it impossible to select values located after the fifth. 

It is being reproduced using following steps by administrators:

1. Go to any page in “Edit” mode.

2. Add new visualizer module > List > Content Block > Choose any template. 

3. Check the Page Size drop down as an example. 

Cause

This is a known issue with CSS styling in DNN.

Resolution

The fix here is to manually add a scroller to each field via the dnn.DropDownlIst.css file located at SITE/Resources/Shared/components/DropDownList.

• For “Sort” field: 
  .sortFieldSelectContainer .ReactCollapse--collapse { overflow-y: scroll !important; overflow-x: hidden !important;}
  .sortFieldSelectContainer .ReactCollapse--collapse div div {display:none !important;}
• For “Page Size” field:
  .pageSizeContainer .ReactCollapse--collapse { overflow-y: scroll !important; overflow-x: hidden !important;}
  .pageSizeContainer .ReactCollapse--collapse div div {display:none !important;}
• For “Details Page” field:
  .detailsPageSelectContainer .ReactCollapse--collapse { overflow-y: scroll !important; overflow-x: hidden !important;}
  .detailsPageSelectContainer .ReactCollapse--collapse div div {display:none !important;}

Once the CSS is added, you can check the visualizer drop downs to make sure it is working as intended.