Handsontable: Date Picker alignment issue in case of last row at bottom of page

[ravi590]

How to change the date picker pop-up opening direction, so it opens upwards if there is not enough space below the edited cell(last row at bottom of page).Can any one help on this ASAP.

[AMBudnik]

I think that this should be marked as a change. Currently you don't actually have a choice to allow the date picker to open above the cell.

[ravi590]

Thanks @AMBudnik, Currently select dropdown is working like that when we verified, only issue is with date picker.

[AMBudnik]

That's right @ravi590 since 0.24.2 we're opening a dropdown list upwards when there's no free space for it.

[Suresh437]

Hi @AMBudnik , it would be very helpful if any one help on this , my team also facing same issue,

[AMBudnik]

@Suresh437 our developers already know the case so in any spare time this issue should be fixed.

[MariaSpalding]

Is there any progress on this or information about when it will be implemented? Or any workarounds found?

[AMBudnik]

Hi @thenoune
There's no fix but I was thinking about a possible workaround. We could try to overwrite the htDatepickerHolder class with top and left attributes.

[MariaSpalding]

After fiddling with it a little bit I discovered this:

Replace line in handsontable.full.js below where it sets the position of the date picker in

showDatepicker: function(event){ ...
this.datePickerStyle.top = (window.pageYOffset + offset.top + outerHeight(this.TD)) + 'px';
...
}

with the following if statement that checks to see if the position of the cell is within 224px of the bottom of the window and if so, removes 224px from the top measurement.

if (offset.top >= $(window).height() - 224) {
this.datePickerStyle.top = (window.pageYOffset + offset.top - 224 + outerHeight(this.TD)) + 'px';
} else {
this.datePickerStyle.top = (window.pageYOffset + offset.top + outerHeight(this.TD)) + 'px';
}

[AMBudnik]

related: #3957

[jgbishop]

Is there any outlook on a fix for this? This annoyance is one that would be great to solve.

[AMBudnik]

I truly understand that is is not elegant and can be annoying but we did not schedule the issue yet.

[alarie]

For anybody who faces the same problem and found this issue, here is a little helper class that opens the datepicker to the top if needed:

https://gist.github.com/alarie/e66376ea8e06070864e1ba751043d05a

[cdeepak76]

For now I updated the offsets of the Date picker Widget

Open handsontable.full.ts and look for below
key: 'showDatepicker',
value: function showDatepicker(event) {

Use the below code (change as per your need) to adjust Date Widget's co-ordinates: In my case the overlap was either for the last cells or because of right hand side overlapping of window border.

  //this.datePickerStyle.top = window.pageYOffset + offset.top + (0, _element.outerHeight)(this.TD) + 'px';
  if (offset.top >= $(window).height() - 224) {
	  this.datePickerStyle.top = (window.pageYOffset + offset.top - 224 + (0, _element.outerHeight)(this.TD)) + 'px';
  } else {
	  this.datePickerStyle.top = (window.pageYOffset + offset.top + (0, _element.outerHeight)(this.TD)) + 'px';
  }
  //this.datePickerStyle.left = window.pageXOffset + offset.left  + 'px';
  this.datePickerStyle.left = (window.pageXOffset + offset.left - 240 + (0, _element.outerWidth)(this.TD)) + 'px';

[Hinaser]

I found another solution.
I will show it to you when I am ready.

[AMBudnik]

inform forum

[lokesh-soni]

@AMBudnik any update on this issue? Because we are facing same issue. And while trying the to fix the same with some above mentioned solutions we got offset is not defined. Can you please help us with this?

[AMBudnik]

Sorry @lokesh-soni there are no updates on that issue yet

[bmjjr]

The hack from @cdeepak76 makes this issue at least bearable in the short term.

[Jiys]

@lokesh-soni the error was caused by the offset is not defined in you version of handsontable. take a look at var t, n = this.TD.getBoundingClientRect(), replace offset by n. Also don't forget replace _element by d. @cdeepak76 's solution works perfectly fine, you might need to change the pixel value.

[fmaiabatista]

For anybody who faces the same problem and found this issue, here is a little helper class that opens the datepicker to the top if needed:

https://gist.github.com/alarie/e66376ea8e06070864e1ba751043d05a

Can someone please explain how to properly use @alarie 's gist to make it work? I have tried it and even though I can confirm that the table's instance settings have the editor set up, when I debug the click event it runs the original showDatepicker function from handsontable.js

Using the workaround provided by @cdeepak76 is not an option because we have a git project and handsontable is installed via npm package... so altering the source (handsontable.full.js) is not viable.

[alarie]

@fmaiabatista I'm not 100% sure because i'm not using the DatePicker anymore in my project, but I think you have to overwrite the editorprop of your column with the DateEditroHelper class from the Gist. See here: https://handsontable.com/docs/7.3.0/frameworks-wrapper-for-vue-custom-editor-example.html

[AMBudnik]

Demo for tests 11.1 https://jsfiddle.net/dL1ae9b7/1/

[AMBudnik]

The datepicker does not change its position in 12.1.3 as well. Updated demo https://jsfiddle.net/g3q64p1a/

Result

Here we'd expect the picker to flit and open upwards.