sheriffderek sheriffderek - 21 days ago 5
AngularJS Question

Angular 1.5 ui-view ng-scope fixed positioning css context is not window but view

I have an Angular 1.5 application.

I have a .5 opacity div that covers the view / think modal. The project has changed a bit and now I need to get this div covering the entire window. The project uses ui-router.

My understanding, (writing CSS for 7 years) is that 'fixed' uses the context of the window - however, the div will not stick to the window and instead stays within it's nested view. I've actually attempted mimic fixed positioning in a div in the past and it wasn't possible, so how is that happening here? Does the view create a new context? and can I override that?

This could be a 1 line fix or a series of services and a partial re-write given the larger reasoning behind this.




HTML



HTML
see .xxx                ^





CSS



CSS

Layout

I'm trying to recreate it here but I haven't been able to... http://codepen.io/sheriffderek/pen/pNoZpL

<div ui-view ng-cloak class='main-outlet'></div>

>>> <div class="xxx"></div>


Does anyone know what this could be - or have any direction for me?

Thank you.

Answer

It turns out that this has nothing to do with 'view' or Angular or ui-router or Ember / MVC nesting etc, however, I'm going to leave this here for those who might also get lost on this subject. I didn't know where to start - so hopefully, this can help someone.

The reason why the fixed context has changed, in my case, is that I used transform: translate(x,x) to center something. translate() changes the context and fixed no longer refers to the window, but this new context defined by the element with the translate rule. This is really great if you want to do this on purpose, but there seems to be no way to override it...

css3 transform reverts position: fixed

webkit css 'transform3d' + 'position: fixed' issue