`center` region problem.

Sean

MM uses some trick to keep position center (top_center, bottom_center) with transform(-webkit-transform).
But it change module size unexpectedly.

< div class="region top center" >
< div class="container" >
< div module id="SOMETHING" class="module ... " >
< div class="MY_MODULE_CONTENT" > ...

in CSS

#MY_MODULE_CONTENT {
  position:fixed;
  width:100%;
  height:100%;
}

doesn’t work since transform of center.
Is there any idea to escape it?

j.e.f.f

@sean the position:fixed property won’t work because it has a CSS transform applied. This is a limitation of CSS. What are you trying to achieve with your positioning? Maybe I can suggest a different way.

Sean

@j-e-f-f
Yes I know position:fixed not working due to transform. But I need it.
My goal is open popup layer.
The html structure will be like this.

< div class="region top center" >
  < div class="container" >
    < div module id="SOMETHING" class="module ... " >
      < div id="MY_NORMAL_CONTENT" > .. < /div >
      < div id="MY_OVERLAYED_CONTENT" class="hidden or showing" > ... < /div>

I want to draw #MY_OVERLAYED_CONTENT as some kind of popup. In all regions except center it could work perfectly, but not in center.

I also know it can be achieved if my MY_OVERLAYED_CONTENT is appended into body directly, But as you know, it is not so graceful. When module.show() and module.hide() is called, that parts which appended into body directly should be mangaed in .suspend() and .resume(). I don’t want it just for positioning in center region.

j.e.f.f

@sean You don’t need position:fixed. position:absolute will work just as well, since the composition never scrolls. The only caveat is that you will need to ensure that the div with the id MY_OVERLAYED_CONTENT is attached to the document root instead of as part of your module. e.g.:

var overlayDiv = document.createElement("div");
overlayDiv.setAttribute("id", "MY_OVERLAYED_CONTENT");
...
document.body.appendChild(overlayDiv);

This also gives you the advantage of your overlay element being the last item in the draw order meaning that it will layer on top of everything else by default. No need to futz around with z-index which can be a real pain in the bum.

Sean

@j-e-f-f
Yes. That might probably be one solution. But for module hiding, I need to add the code

suspend: function() {
  var overlayDiv = document.getElementById("MY_OVERLAYED_CONTENT")
  overlayDiv.classList.add("hidden")
}

And also for module showing. (resume())

So I just wanted to know any CSS trick to escape prior transform appliance.

j.e.f.f

@sean You would have to override the CSS to remove the transform, but it may give you unexpected results elsewhere and maybe cause havoc with other modules. I would avoid overriding MagicMirror’s core structure.

Your idea to add and remove the hidden class in suspend and resume should work fine. Just don’t create the overlay element as part of the getDom() routine. Create it outside of that, and keep a reference to it in your code. That way you don’t have to make repeated DOM lookups, and you’ll be able to update the container from anywhere in your code at any time.

Sean

@j-e-f-f
Thanks for your instruction. I already have been using those tricks in my modules. Just wanted to know other way to achieve.