Skip to content
This repository has been archived by the owner on Oct 18, 2018. It is now read-only.

Custom editor tutorial doesn't account for fixed height tables (w/ solution) #40

Open
JakeGrice opened this issue Nov 30, 2016 · 0 comments

Comments

@JakeGrice
Copy link

Hoping we can get this solution (or a similar one) on your docs so others won't run into the same confusion I did. If you have a fixed height table, when you "open" the custom editor, and you have scrolled down at all, the vertical positioning is off (way off if you scrolled a lot). It only happens on a fixed height table ('height' setting OR css height property):

Code in the docs for the final "open" method could use these changes (noted in comments):

SelectEditor.prototype.open = function() {
  var width = Handsontable.Dom.outerWidth(this.TD);
  // important - group layout reads together for better performance
  var height = Handsontable.Dom.outerHeight(this.TD);
  var rootOffset = Handsontable.Dom.offset(this.instance.rootElement);
  var tdOffset = Handsontable.Dom.offset(this.TD);
  var editorSection = this.checkEditorSection();
  var cssTransformOffset;
  // change 1 - read the scroll position of the wtTable holder element 
  //  (only comes into play if we're using a fixed height for our Handsontable) 
  var scrollTop = this.instance.view.wt.wtTable.holder.scrollTop;
  var scrollLeft = this.instance.view.wt.wtTable.holder.scrollLeft;

  switch(editorSection) {
    case 'top':
      cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.vertical.clone.wtTable.holder.parentNode);
      break;
    case 'left':
      cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.horizontal.clone.wtTable.holder.parentNode);
      break;
    case 'corner':
      cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.corner.clone.wtTable.holder.parentNode);
      break;
  }
  var selectStyle = this.select.style;

  if (cssTransformOffset && cssTransformOffset !== -1) {
    selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
    // change 2 - css transform is being used, indicating we don't need to account for the scroll position
    scrollTop = scrollLeft = 0;
  } else {
    Handsontable.Dom.resetCssTransform(this.select);
  }

  selectStyle.height = height + 'px';
  selectStyle.minWidth = width + 'px';
  // change 3 - account for scroll offset for perfect positioning
  selectStyle.top = tdOffset.top - scrollTop - rootOffset.top + 'px';
  selectStyle.left = tdOffset.left - scrollLeft - rootOffset.left + 'px';
  selectStyle.margin = '0px';
  selectStyle.display = '';

  this.instance.addHook('beforeKeyDown', onBeforeKeyDown);
};
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants