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.

    Problem with Alert Module

    Scheduled Pinned Locked Moved Troubleshooting
    7 Posts 2 Posters 3.3k Views 1 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.
    • Y Offline
      yours.mukul
      last edited by

      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

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

        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%;
        }
        
        
        Y 1 Reply Last reply Reply Quote 0
        • Y Offline
          yours.mukul @broberg
          last edited by

          @broberg I added following code to my custom css

          body {
             margin-top: 20px;
             margin-left: 8px;
             margin-right: 8px;	
           }
          
          
          brobergB 1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor @yours.mukul
            last edited by

            @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);
             }
            
            Y 1 Reply Last reply Reply Quote 0
            • Y Offline
              yours.mukul @broberg
              last edited by

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

              brobergB 1 Reply Last reply Reply Quote 0
              • brobergB Offline
                broberg Project Sponsor @yours.mukul
                last edited by broberg

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

                1 Reply Last reply Reply Quote 0
                • Y Offline
                  yours.mukul
                  last edited by

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

                  0_1507054704888_capture4.PNG

                  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