Custom element with position absolute

Question

I am trying to contain/put a fin-hypergrid within a web component, but because it's scrollbars are custom divs with position: absolute on them, they are positioned absolute to the window rather that the component itself.

Here is my jsfiddle: https://jsfiddle.net/50kyyfam/

I'm almost certain I need to add a css properties to the :host style to tell the grid to position absolute to the boundary of the data-grid component, but I don't know what it should be?

EDIT: As a side note, if any of the fin-hypergrid are looking, the minified version of core threw an exception when initialising the above jsfiddle. (Chrome 63)

To position an *absolutely positioned* element *relative* to its containing element, `position: relative` should be declared on that containing element, e.g: https://jsfiddle.net/50kyyfam/1/ — UncaughtTypeError, Jan 11 '18 at 07:46
@UncaughtTypeError - awesome, I just added `position: relative` to the `:host` style and it worked as expected - if you create answer, I can mark it as correct — Cheetah, Jan 11 '18 at 07:50
Would be happy to, allow me a few minutes and I'll have one posted. — UncaughtTypeError, Jan 11 '18 at 07:57
Two down votes...is there something wrong with my question?...have I broken some sort of etiquette? — Cheetah, Jan 11 '18 at 10:42

score 1 · Accepted Answer · answered Jan 11 '18 at 08:03

To position an absolutely positioned element relative to its containing element, position: relative should be declared on that containing element, e.g:

data-grid {
    position: relative;
}

class DataGrid extends HTMLElement {

    constructor() {
      super();
      this.createShadowRoot().innerHTML = `
       <style>
         :host {
           display: block;
          }
          
          div {
           height: 100%;
           width: 100%;
          }
        </style>
        <div></div>
      `;
    }

    connectedCallback() {
   const grid = new fin.Hypergrid(this.shadowRoot.querySelector('div'));
      const data = [
        { name: 'Company 1', price: 300 },
        { name: 'Company 2', price: 200 },
        { name: 'Company 3', price: 150 },
        { name: 'Company 4', price: 500 },
        { name: 'Company 5', price: 999 }
      ];
      grid.setData(data);
    }

  }

  customElements.define('data-grid', DataGrid);

data-grid {
    position: relative;
}

<script src="https://fin-hypergrid.github.io/core/2.0.2/build/fin-hypergrid.js"></script>

<data-grid style="width:100px; height: 150px;"></data-grid>

Updated JSFiddle

To expand upon, for the sake of clarity and for the potential benefit of any other possible readers:

When declaring an element as an absolutely positioned element (absolute or fixed) you are removing the element from the natural document flow; which simply means the element is no longer interacting with sibling elements in the way relative or static elements do (imagine the element "siting above" the rest of the DOM).
By default, an absolutely positioned element's position is "relative" to the window; this means if you offset its position with left or right property values it'll move a distance equal to the property value from the window. You can position an element with a position property value of absolute (not fixed) relative to any containing element if you declare relative positioning to that containing element.

Custom element with position absolute

1 Answers1