Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Module displaying over another

    Troubleshooting
    3
    3
    1232
    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.
    • F
      Francopacks last edited by

      I have a module in the “middle_center” of the screen that is partially displaying over the top of the “top_left” and “top_right” modules. Is there a way to send it to the back? in the config.js file I’ve tried moving the “middle_center” offending module to the top and to the bottom of the config, thinking that it had to do with the order the modules were loaded in, but to no avail.

      1 Reply Last reply Reply Quote 0
      • D
        doubleT Module Developer last edited by

        That’s not how it works. The order in the config doesn’t matter, except for the order in wich they are loaded (within milliseconds). But all the modules have a “position” value as you noticed: “top_left” or “middle_center” That attached a class to the module and by that class, positions are dealt with.

        These positions are set in the css/main.css but don’t change that file. If it’s not already there, set up a file named “custom.css” and edit it with a text editor. When you want to move “middle_center”, find it in the main.css, not it’s value and change it in the custom.css. You can copy and paste it.

        .region.middle.center {
          top: 50%;
        }
        

        That means it’s positioned 50% down from the top of the screen, halfway in the middle. Play around with the percentage until it fits.

        But you said “send it back” so I’m wondering if something changed its original position, maybe another module has some weird css settings that influences these settings or some changes happened before that messed up the original settings? If that’s the case it’s better to find out and change it back then to add new changes on top.

        1 Reply Last reply Reply Quote 0
        • broberg
          broberg Project Sponsor last edited by broberg

          add to custom.css

          .region.top.left {
          z-index: 2;
          }
          .region.top.right {
          z-index: 2;
          }
          

          this will force the top left and right region modules to be placed 1 “layer” above the others

          1 Reply Last reply Reply Quote 3
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy