JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Window SmartDropDownList in SmartWindow doesn't work correctly

Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #100892
    Tr12
    Member
    Up
    0
    Down

    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:
    Image DropDown
    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

    #100894
    admin
    Keymaster
    Up
    0
    Down

    Hi Tr12,
    1. If you want the dropdownlist’s dropDown to be not hosted by its container, use the dropDownAppendTo property and set it to ‘body’. That way,its bounds would not be restricted by the container’s size. See the property here: https://www.htmlelements.com/docs/dropdownlist-api/#toc-dropdownappendto_any
    2. In Javascript Events Bubble. As the dropDownList also has a ‘close’ event it bubbles up to the document. This behavior is correct.
    Best Regards,
    Peter Stoev
    Smart HTML Elements
    https://www.htmlelements.com/

    #100901
    Tr12
    Member
    Up
    0
    Down

    Hi Peter,
    thank you, setting dropDownAppendTo to the body element worked.
    Regarding event bubbling, thank you for the explanation. I was able to fix the issue by checking if event.target == windowElement, and otherwise ignore the event.
    Thanks

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.