HTML Elements Forums Window & Popups Window SmartDropDownList in SmartWindow doesn't work correctly

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by Avatar Tr12 3 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #100892
    Avatar
    Tr12
    Participant

    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
    Avatar
    admin
    Keymaster

    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
    Avatar
    Tr12
    Participant

    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.