How to absolutely position an element?

Get Help
1

I want to have a component positioned so that it is at the top of the view port. Similar to position: absolute; top: 0; in CSS. My issue is that it seems that my component is “trapped” within its parent. I’ve tried setting y to 0, and to various negative numbers. It never appears any higher on screen than its parent.

My code looks something like this:

someComponent.patch({ y: -parentPositionY, });

Any tips are most appreciated!

2

Hello!

By default a component is placed at x: 0 and y: 0 of it’s parent. Did you try to set something like y: -15 and see what happens?

Are you using flex in the parent? If so doing flexItem: null, on the child should help.

If it’s a component that live on its own in the page like a header you can look at widgets (if you are using the SDK).

To give you better help I might need an exemple of the static template() and what surrounds your patch function.

1 Like
3

So it sounds like you’re saying the position of a component is always relative to its parent. Is there no way to say “put this at the top of the screen, regardless of where the parent is”?

I’m currently doing what you suggest: setting y to a negative value. Specifically, I’m setting it to -parentY. This gets me partway there, but it’s not quite right.

Is there an api for finding the y of the parent? Currently I’m doing this rather ugly thing: const parentY = -this.__core._parent._renderContext.py.

Thanks so much for your help!

4

Yes you can actually access to the component by using this.tag('ComponentName').
In your case if you have something like this:

static _template() {
   ParentComponent: {
      ... someProperties,
      ChildComponent: {
         ...someProperties,
       }
   }
}

_active() {
    const parent = this.tag('ParentComponent')
    this.tag('ChildComponent').patch({ y: parent.y })
}

You can find a lot of infos by doing a console.log on this.tag('ComponentName').

If you need to have it outside of the parent itself, it might be a good idea to look at an alternative for that component tree!

1 Like
5

Thanks, @Nicolas . I’ll explore this.