[FEAT] parentElement not used if position: fixed

[alexcroox]

Describe the bug I provided a parentElement expecting the pane to open from the bottom of the parent's bottom, but because.cupertino-pane-wrapper .pane uses position: fixed, the pane's bottom is always body bottom

Expected behavior When using parentElement I expected the bottom of the pane to be the bottom of the parentElement, not body.

Screenshots

[roman-rr]

Hello @alexcroox thank you for issue ticket. If i correct understand this is feature request to make pane relatively positioned for parentElement, right ?
What if you add bottomOffset, is that satisfied for your needs ?

let settings = {
   ...
   bottomOffset: VALUE
}

[alexcroox]

I think perhaps I'm miss-understanding what the use case for parentElement is if the pane is fixed position? But yes that was my assumption, that the pane would open at the bottom position of it's parent container (which I understand is body by default).

I could set a fixed value for bottom offset, but when you need to dynamically include safe-area-inset-bottom, or if the elements below the parent don't have a fixed height, it gets a bit harder to determine that for a fixed value in JS

[roman-rr]

@alexcroox on this moment you can just grab safe area value from css properties like this:

get deviceOffset() {
    const sab = getComputedStyle(document.documentElement).getPropertyValue("--ion-safe-area-bottom");
    return parseFloat(sab.replace('px', ''));
}

But i will review ability to make relative positioning. Actually, use case for parentElement is to overlap some elements with higher z-index.

[roman-rr]

Hello @alexcroox its been awhile since i get touch here. I reviewed possibility to make pane relatively positioned to parentElement. It is possible, however required a lot of changes and debug, which will reproduce many bugs in further. If more such request will appears time-to-time, I will implement this feature, of course.

Currently, you might use this solution, which quite easy to make pane relative on parentElement from you side:

const selector = '.parent-container';
const parentEl = document.querySelector(selector);
const height = parentEl.getBoundingClientRect().height; // Be sure here your parent element rendered to get height value
let bottomOffset = window.innerHeight - height - 15; // 15 here is default padding-top on .pane element

// Settings
const settings: CupertinoSettings = {
  parentElement: selector,
  bottomOffset,
  ...
};

// Present pane
const pane = new CupertinoPane('SELECTOR', settings);
await this.bulletin.present({animate: true});