search

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

DatePicker: Root calendar widget in control rather than document root #116

Closed FlowIT-JIT closed 3 years ago

FlowIT-JIT commented 3 years ago

The DatePicker's calendar widget is mounted in the root of <body> which first of all pollutes the global scope, but more importantly makes it impossible to use the calendar widget inside a callout that is "light dismissable". Clicking the calendar widget will cause the callout to close.

We need to mount the calendar widget locally rather than globally. Doing so, will also require us to do the positioning of the widget. This can be fairly complex as several use cases must be taken into account.

image

* Calendar widget will stick on screen - it will not scroll along with document or scrollable container, but it also has the ability to overflow/escape the boundaries of a contain using overflow.

** Bad combination as the calendar widget will scroll along with the document, not the scrollable container, as it is positioned relative to the document which is the the offset parent. This is guaranteed to confuse the user, so in this case we should force position:fixed instead!

ALSO notice that the control might be contained in an element with overflow, and have a difference parent that is positioned. The image above might give the impression that "parent" is just one elememt, but that's not necessarily the case. Example:

<div style="overflow: auto">
    ....
    <div style="position: relative">
        ....
        <div class="FitUiControl" ....>
        ....
    </div>
    ....
<div>

Notice that the parent element having overflow and position does not need to be the same, as this example demonstrates: https://jsfiddle.net/7ow5pabq/2/ - having both position and overflow on the same element works as well.

FlowIT-JIT commented 3 years ago

EDIT: Regarding logic for "position relative" (relative to offset parent) using position:absolute:

All of above is actually the same. Simply position the calendar widget relative to me.GetDomElement().offsetParent

So it seems what differs, is what we measure available space against to do edge detection; the browser viewport or the overflow/scroll parent.

FlowIT-JIT commented 3 years ago

Consider implementing support for position:fixed only, and simply have the calendar widget close when scrolling occur in the control's scroll parent, or in the document itself.

FlowIT-JIT commented 3 years ago

We ended up implementing it with full support as outlined in the reported issue, not just position:fixed as suggested in my previous comment.