• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.2k 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 Sep 30, 2017, 7:46 PM

    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
    • B Offline
      broberg Project Sponsor
      last edited by Oct 2, 2017, 4:56 PM

      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 Oct 2, 2017, 6:50 PM Reply Quote 0
      • Y Offline
        yours.mukul @broberg
        last edited by Oct 2, 2017, 6:50 PM

        @broberg I added following code to my custom css

        body {
           margin-top: 20px;
           margin-left: 8px;
           margin-right: 8px;	
         }
        
        
        B 1 Reply Last reply Oct 2, 2017, 7:00 PM Reply Quote 0
        • B Offline
          broberg Project Sponsor @yours.mukul
          last edited by Oct 2, 2017, 7:00 PM

          @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 Oct 2, 2017, 7:02 PM Reply Quote 0
          • Y Offline
            yours.mukul @broberg
            last edited by Oct 2, 2017, 7:02 PM

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

            B 1 Reply Last reply Oct 2, 2017, 7:11 PM Reply Quote 0
            • B Offline
              broberg Project Sponsor @yours.mukul
              last edited by broberg Oct 2, 2017, 7:12 PM Oct 2, 2017, 7:11 PM

              @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 Oct 3, 2017, 6:18 PM

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

                0_1507054704888_capture4.PNG

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                1 / 1
                • First post
                  1/7
                  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