mominsamir / smDateTimeRangePicker

Angular Material Date Picker, DateTime Picker, Date Range Picker, Date Time range picker
http://mominsamir.github.io/smDateTimeRangePicker/
MIT License
130 stars 50 forks source link

Suggestion for visible viewport #105

Open PabloPG opened 7 years ago

PabloPG commented 7 years ago

First, sorry for my english :) @mominsamir

When I create an input time list, the viewport does not appear correctly due to scroll, the getBoundingClientRect () function returns a negative bottom, I suggest this:

var bodyRectBottom = (bodyRect.bottom < 0) ? (bodyRect.bottom - window.scrollY) : bodyRect.bottom;

function getVisibleViewPort(elementRect,bodyRect){
  var calenderHeight = 296;
  var calenderWidth = 460;

  var bodyRectBottom = (bodyRect.bottom < 0) ? (bodyRect.bottom - window.scrollY) : bodyRect.bottom;

  var top = elementRect.top;
  if(elementRect.top + calenderHeight  + window.scrollY > bodyRectBottom){
    top = elementRect.top - calenderHeight + 10;
  }

  var left = elementRect.left;
  if(elementRect.left +calenderWidth > bodyRect.right){
    left = elementRect.left - ((elementRect.left +calenderWidth) - (bodyRect.right - 10));
  }
  return {top : top, left : left };
}
mominsamir commented 7 years ago

Dont worry about English, I am not native English speaker. I will test with module and update if it works.