ScriptUI: Flickering dropDownList in InDesign dialog

Report · Nov 26, 2020

Hi, I need help by the community. If you use a DropdownList in a dialog that contains many entries, the list is flickering if you open it. The problem occurs when the list opens to the top and takes up the entire height. Does anyone know a solution for this problem?
The sample code is from the ScriptUI Dialog Builder.

Thanks to everyone

// DIALOG
// ======
var dialog = new Window("dialog"); 
    dialog.text = "Import Multiple PDF pages"; 
    dialog.orientation = "row"; 
    dialog.alignChildren = ["left","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 16; 

// GROUP1
// ======
var group1 = dialog.add("group", undefined, {name: "group1"}); 
    group1.orientation = "column"; 
    group1.alignChildren = ["fill","top"]; 
    group1.spacing = 10; 
    group1.margins = 0; 

// PANEL1
// ======
var panel1 = group1.add("panel", undefined, undefined, {name: "panel1"}); 
    panel1.text = "Page Selection"; 
    panel1.preferredSize.height = 205; 
    panel1.orientation = "column"; 
    panel1.alignChildren = ["left","top"]; 
    panel1.spacing = 10; 
    panel1.margins = 10; 

var statictext1 = panel1.add("statictext", undefined, undefined, {name: "statictext1"}); 
    statictext1.text = "Import PDF Pages:"; 

// GROUP2
// ======
var group2 = panel1.add("group", undefined, {name: "group2"}); 
    group2.orientation = "row"; 
    group2.alignChildren = ["left","center"]; 
    group2.spacing = 10; 
    group2.margins = 0; 

var edittext1 = group2.add('edittext {properties: {name: "edittext1"}}'); 
    edittext1.text = "1"; 
    edittext1.preferredSize.width = 60; 

var statictext2 = group2.add("statictext", undefined, undefined, {name: "statictext2"}); 
    statictext2.text = "thru"; 

var edittext2 = group2.add('edittext {properties: {name: "edittext2"}}'); 
    edittext2.text = "1"; 
    edittext2.preferredSize.width = 60; 

// PANEL1
// ======
var checkbox1 = panel1.add("checkbox", undefined, undefined, {name: "checkbox1"}); 
    checkbox1.text = "Reverse Page Order"; 

var statictext3 = panel1.add("statictext", undefined, undefined, {name: "statictext3"}); 
    statictext3.text = "Start Placing on Doc Page:"; 

var edittext3 = panel1.add('edittext {properties: {name: "edittext3"}}'); 
    edittext3.text = "1"; 
    edittext3.preferredSize.width = 60; 

var checkbox2 = panel1.add("checkbox", undefined, undefined, {name: "checkbox2"}); 
    checkbox2.text = "Map to Doc Pages"; 

// PANEL2
// ======
var panel2 = group1.add("panel", undefined, undefined, {name: "panel2"}); 
    panel2.text = "Sizing Options"; 
    panel2.preferredSize.height = 160; 
    panel2.orientation = "column"; 
    panel2.alignChildren = ["left","top"]; 
    panel2.spacing = 10; 
    panel2.margins = 10; 

var checkbox3 = panel2.add("checkbox", undefined, undefined, {name: "checkbox3"}); 
    checkbox3.text = "Fit to Page"; 

var checkbox4 = panel2.add("checkbox", undefined, undefined, {name: "checkbox4"}); 
    checkbox4.text = "Keep Proportions"; 

var checkbox5 = panel2.add("checkbox", undefined, undefined, {name: "checkbox5"}); 
    checkbox5.text = "Bleed the Fit Page"; 
    checkbox5.value = true; 

var statictext4 = panel2.add("statictext", undefined, undefined, {name: "statictext4"}); 
    statictext4.text = "Scale of Imported Page"; 

// GROUP3
// ======
var group3 = panel2.add("group", undefined, {name: "group3"}); 
    group3.orientation = "row"; 
    group3.alignChildren = ["left","center"]; 
    group3.spacing = 10; 
    group3.margins = 0; 

var statictext5 = group3.add("statictext", undefined, undefined, {name: "statictext5"}); 
    statictext5.text = "X%:"; 

var edittext4 = group3.add('edittext {properties: {name: "edittext4"}}'); 
    edittext4.text = "100"; 
    edittext4.preferredSize.width = 40; 

var statictext6 = group3.add("statictext", undefined, undefined, {name: "statictext6"}); 
    statictext6.text = "Y%:"; 

var edittext5 = group3.add('edittext {properties: {name: "edittext5"}}'); 
    edittext5.text = "100"; 
    edittext5.preferredSize.width = 40; 

// GROUP4
// ======
var group4 = dialog.add("group", undefined, {name: "group4"}); 
    group4.orientation = "column"; 
    group4.alignChildren = ["fill","top"]; 
    group4.spacing = 10; 
    group4.margins = 0; 

// PANEL3
// ======
var panel3 = group4.add("panel", undefined, undefined, {name: "panel3"}); 
    panel3.text = "Positioning Options"; 
    panel3.preferredSize.height = 205; 
    panel3.orientation = "column"; 
    panel3.alignChildren = ["fill","top"]; 
    panel3.spacing = 10; 
    panel3.margins = 10; 

var statictext7 = panel3.add("statictext", undefined, undefined, {name: "statictext7"}); 
    statictext7.text = "Position on Page Aligned From:"; 

var dropdown1_array = ["Top Left","Top Center","Top Right","Center Left","Center","Center Right","Bottom Left","Bottom Center","Bottom Right","-","Top - Relative to spine","Center  - Relative to spine","Right  - Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine","Relative to spine"]; 
var dropdown1 = panel3.add("dropdownlist", undefined, undefined, {name: "dropdown1", items: dropdown1_array}); 
    dropdown1.selection = 0; 

// GROUP5
// ======
var group5 = panel3.add("group", undefined, {name: "group5"}); 
    group5.orientation = "row"; 
    group5.alignChildren = ["left","center"]; 
    group5.spacing = 10; 
    group5.margins = 0; 

var statictext8 = group5.add("statictext", undefined, undefined, {name: "statictext8"}); 
    statictext8.text = "Rotation:"; 

var dropdown2_array = ["0","90","180","270"]; 
var dropdown2 = group5.add("dropdownlist", undefined, undefined, {name: "dropdown2", items: dropdown2_array}); 
    dropdown2.selection = 0; 
    dropdown2.preferredSize.width = 130; 

// PANEL3
// ======
var statictext9 = panel3.add("statictext", undefined, undefined, {name: "statictext9"}); 
    statictext9.text = "Offset by:"; 

// GROUP6
// ======
var group6 = panel3.add("group", undefined, {name: "group6"}); 
    group6.orientation = "row"; 
    group6.alignChildren = ["left","center"]; 
    group6.spacing = 10; 
    group6.margins = 0; 

var statictext10 = group6.add("statictext", undefined, undefined, {name: "statictext10"}); 
    statictext10.text = "X:"; 

var edittext6 = group6.add('edittext {properties: {name: "edittext6"}}'); 
    edittext6.text = "0"; 
    edittext6.preferredSize.width = 40; 

var statictext11 = group6.add("statictext", undefined, undefined, {name: "statictext11"}); 
    statictext11.text = "Y:"; 

var edittext7 = group6.add('edittext {properties: {name: "edittext7"}}'); 
    edittext7.text = "0"; 
    edittext7.preferredSize.width = 40; 

// PANEL4
// ======
var panel4 = group4.add("panel", undefined, undefined, {name: "panel4"}); 
    panel4.text = "Placement Options"; 
    panel4.preferredSize.height = 160; 
    panel4.orientation = "column"; 
    panel4.alignChildren = ["fill","top"]; 
    panel4.spacing = 10; 
    panel4.margins = 10; 

// GROUP7
// ======
var group7 = panel4.add("group", undefined, {name: "group7"}); 
    group7.orientation = "row"; 
    group7.alignChildren = ["left","center"]; 
    group7.spacing = 10; 
    group7.margins = 0; 

var statictext12 = group7.add("statictext", undefined, undefined, {name: "statictext12"}); 
    statictext12.text = "Crop to:"; 

var dropdown3_array = ["Art","Crop","Trim","Bleed","Media"]; 
var dropdown3 = group7.add("dropdownlist", undefined, undefined, {name: "dropdown3", items: dropdown3_array}); 
    dropdown3.selection = 0; 
    dropdown3.preferredSize.width = 136; 

// PANEL4
// ======
var checkbox6 = panel4.add("checkbox", undefined, undefined, {name: "checkbox6"}); 
    checkbox6.text = "Place Pages on a New Layer"; 

var checkbox7 = panel4.add("checkbox", undefined, undefined, {name: "checkbox7"}); 
    checkbox7.text = "Ignore Font and Image Errors"; 

var checkbox8 = panel4.add("checkbox", undefined, undefined, {name: "checkbox8"}); 
    checkbox8.text = "Transparent PDF Background"; 
    checkbox8.value = true; 

// GROUP8
// ======
var group8 = dialog.add("group", undefined, {name: "group8"}); 
    group8.orientation = "column"; 
    group8.alignChildren = ["fill","top"]; 
    group8.spacing = 10; 
    group8.margins = 0; 

var ok = group8.add("button", undefined, undefined, {name: "ok"}); 
    ok.text = "OK"; 

var cancel = group8.add("button", undefined, undefined, {name: "cancel"}); 
    cancel.text = "Cancel"; 

dialog.show();

Report · Nov 27, 2020

I don't see any flickering, whether the list opens up or down (depending on the dialog's position). That on Windows 10. Maybe it's caused by your operating system and/or graphics card and/or screen setting.

Report · Nov 27, 2020

Hi David,

tested your code, see no flickering with your list.

Tested with several positions of the dialog on my screen: List fully showing and going down, list partly showing, list going up. No issue found with InDesign 2021 on Windows 10.

Regards,
Uwe Laubender

( ACP )

Report · Nov 28, 2020

No flickering here, ID 16.0 on Mac Catalina 10.15.6

Adobe Community

ScriptUI: Flickering dropDownList in InDesign dialog