Search code examples
cssaurelia

Aurelia composed absolute elements

In a view rendered by <compose> within another view, I have a div that I want to take over the whole browser window in response to a user action. This CSS

position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;

didn't work. The answer to Absolute position is not working suggests that I have exactly the opposite problem. Most likely my div is a child of a block element that specifies relative position.

So far the options apparent to me are...

  • Re-parent it in the DOM
  • Have another view directly parented on the page and use complicated messaging to proxy back and forth

I don't think much of either of these. I'm not certain of the implications of reparenting with a largely binder controlled DOM and the other option is ridiculously complicated.

Anyone got any better ideas?

Solution

  • There are a few solutions for this case:

    1. You can use CSS position fixed on the element you want to go full page.
    2. You can move the element that needs to be in full page in a separate tree from the root element in the view where it resides.
    3. Create a custom attribute, decorated with @templateController(), and upon binding , insert the view into document body instead of its template position.

    Solution 1 is the best, if your mobile support targets have no issue with position fixed.