MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Problem with Alert Module



  • I have a problem with Alert module, I’m using a module for background image. Now whenever I have alert on my magic mirror, I partially covers the screen

    How to cop with it??
    0_1506800771921_m.PNG


  • Module Developer

    I would add this to your custom.css-file and play with the width and color settings.

    .alert .ns-box {
      background: #fff;
      padding: 17px;
      line-height: 1.4;
      margin-bottom: 10px;
      z-index: 1;
      color: black;
      font-size: 70%;
      position: relative;
      display: table;
      word-wrap: break-word;
      max-width: 100%;
      border-radius: 5px;
    }
    
    .alert .ns-alert {
      border-style: solid;
      border-color: #fff;
      padding: 17px;
      line-height: 1.4;
      margin-bottom: 10px;
      z-index: 3;
      color: white;
      font-size: 70%;
      position: fixed;
      text-align: center;
      right: 0;
      left: 0;
      margin-right: auto;
      margin-left: auto;
      top: 40%;
      width: 40%;
      height: auto;
      word-wrap: break-word;
      border-radius: 20px;
    }
    
    .alert .black_overlay {
      position: fixed;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.93); // the last 0.93 is the transparency of the black background
      width: 100%;
      height: 100%;
    }
    
    


  • @broberg I added following code to my custom css

    body {
       margin-top: 20px;
       margin-left: 8px;
       margin-right: 8px;	
     }
    
    

  • Module Developer

    @yours.mukul okey

    when changing the body margins you should also adress the body height and width

    body {
       margin-top: 20px;
       margin-left: 8px;
       margin-right: 8px;	
      height: calc(100% - 80px);
      width: calc(100% - 16px);
     }
    


  • @broberg Actually the problem is something else. Because when I decrease the light intensity from MMM-Remote Module, the left portion remains untouched


  • Module Developer

    @yours.mukul

    The Alert modules black overlay background is set to 93% transparency, the overlay takes it’s dimensions from the body height and width (i.e 100% of the bodys width and height, ) if you don’t change the height and width together with the margin changes you did, the alert module will not fill the entire screen.



  • See the inspecting of elements, can anyone help me ??

    0_1507054704888_capture4.PNG