4. Module displaying over another
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Module displaying over another

  • F

    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.

    0
  • D
    Module Developer

    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.

    0
  • Module Developer

    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

    2