MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    `center` region problem.

    Scheduled Pinned Locked Moved Development
    7 Posts 2 Posters 1.7k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ? Offline
      A Former User
      last edited by

      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 1 Reply Last reply Reply Quote 0
      • J Offline
        j.e.f.f Project Sponsor Module Developer @Guest
        last edited by

        @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.

        ? 1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User @j.e.f.f
          last edited by A Former User

          @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 1 Reply Last reply Reply Quote 0
          • J Offline
            j.e.f.f Project Sponsor Module Developer @Guest
            last edited by

            @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.

            ? 1 Reply Last reply Reply Quote 0
            • ? Offline
              A Former User @j.e.f.f
              last edited by

              @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 1 Reply Last reply Reply Quote 0
              • J Offline
                j.e.f.f Project Sponsor Module Developer @Guest
                last edited by

                @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.

                ? 1 Reply Last reply Reply Quote 0
                • ? Offline
                  A Former User @j.e.f.f
                  last edited by

                  @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. :D

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy