Hi, I’m trying to display a smart-drop-down-list within the contents of a smart-window. However, I faced some issues:

1. When clicking on the drop-down list, the box containing the items is cut off before the window’s footer area, instead of being displayed in the foreground.
2. When closing the drop-down-list, the Window’s “close” event is fired even though the window doesn’t close.

Please see the following sample screenshot:

You can see that the dropdown area isn’t displayed in the foreground.
Additionally, when you add an event listener to the Window element, like this:
dialog.addEventListener(“close”, evt => {
alert(“Window closed”);
});
you can see that the “alert” box is shown when you close the drop-down list, even though the window stays open.
The JavaScript code which I used looks like this (the HTML page includes JQuery):

window.onload = () => {
let dialog = new window.Smart.Window();
dialog.style.width = "auto";
dialog.style.height = "auto";
dialog.modal = true;
dialog.addEventListener("close", evt => {
alert("Window closed");
});
let footerTemplate = document.createElement("template");
footerTemplate.innerHTML = "<smart-button style='width: 100px;'>OK</smart-button><smart-button style='width: 100px;'>Cancel</smart-botton>";
dialog.footerTemplate = footerTemplate;
$(dialog).append(
$("<table>").append(
$("<tr>").append(
$("<td>").append("Row1"),
$("<td>").append(
$("<smart-drop-down-list>").append(
$("<smart-list-item>", { value: "A" }).text("Item A"),
$("<smart-list-item>", { value: "B" }).text("Item B"),
$("<smart-list-item>", { value: "C" }).text("Item C"),
$("<smart-list-item>", { value: "D" }).text("Item D"),
$("<smart-list-item>", { value: "E" }).text("Item E"),
$("<smart-list-item>", { value: "F" }).text("Item F"),
$("<smart-list-item>", { value: "G" }).text("Item G"),
)
)
),
$("<tr>").append(
$("<td>").append("Row2"),
$("<td>").append(
$("<smart-drop-down-list>").append(
$("<smart-list-item>", { value: "A" }).text("Item A"),
$("<smart-list-item>", { value: "B" }).text("Item B"),
$("<smart-list-item>", { value: "C" }).text("Item C"),
$("<smart-list-item>", { value: "D" }).text("Item D"),
$("<smart-list-item>", { value: "E" }).text("Item E"),
$("<smart-list-item>", { value: "F" }).text("Item F"),
$("<smart-list-item>", { value: "G" }).text("Item G"),
)
)
),
$("<tr>").append(
$("<td>").append("Row3"),
$("<td>").append(
$("<span>").text("Text")
)
)
)
);
document.body.appendChild(dialog);
dialog.open();
};

 
Thank you