Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

DropDown: DetectBoundaries(..) not working when pull down menu has no max height #187

Open Jemt opened 1 year ago

Jemt commented 1 year ago

Consider the following example:

https://jsfiddle.net/o3t8pnhk/4/

HTML

<div id="Page"></div>

StyleSheet

#Page
{
    width: 600px;
    height: 300px;
    border: 1px solid red;
    padding: 1em;
    overflow: auto;
}

JavaScript

Fit.Events.OnReady(function()
{
    dd = new Fit.Controls.WSDropDown("WSDropDown1");
    dd.Url("https://fitui.org/demo/GetUsers.php");
    dd.JsonpCallback("JsonpCallback"); // Loading data from foreign domain
    dd.MultiSelectionMode(true);
    dd.Width(100, "%");
    dd.DropDownMaxHeight(-1); // DetectBoundaries(..) doesn't work with a value of -1! Work around: use a value of 9999
    dd.DetectBoundaries(true); // Doesn't work when DropDownMaxHeight is set to -1
    dd.InputEnabled(true);
    dd.OnRequest(function(sender, eventArgs)
    {
        eventArgs.Request.SetParameter("NoCache", Fit.Data.CreateGuid());
        eventArgs.Request.SetParameter("Search", dd.GetInputValue());
    });
    dd.GetTreeView().OnPopulated(function(sender, eventArgs)
    {
        if (eventArgs.Node === null) // Root nodes received
        {
            var tv = dd.GetTreeView();
            Fit.Array.ForEach(tv.GetAllNodes(), function(n)
            {
                n.Expanded(true);
            });
        }
    });
    dd.Render(document.querySelector("#Page"));

    if (Fit.Browser.IsMobile())
        dd.Width(100, "%");
});

DropDown will exceed its boundaries when DropDownMaxHeight(-1) is set. If we instead assign it a very high value such as 9999, then everything works fine.

Cause of error can be found here: https://github.com/Jemt/Fit.UI/blob/ade73e731e9e4dbfba5abbbfd7296588c3ca82ba/Controls/DropDown/DropDown.js#L2477

When we replace the variables, it becomes obvious why it fails. -1 will never be greater than spaceAvailable, e.g. 123: if (picker !== null && (maxHeight.Unit !== "px" || maxHeight.Value > spaceAvailable)) if (picker !== null && ("px" !== "px" || -1 > 123))

FlowIT-JIT commented 1 year ago

One could argue that it works as expected. DropDownMaxHeight(-1) means assume the height necessary to show all items. But on the other hand DetectBoundaries(..) means "do not exceed boundaries". It comes down to which of the two properties should win. But it is odd that DetectBoundaries(..) takes precedence when DropDownMaxHeight is 9999, but not when its value is -1. In any case, this is a minor problem.