Navigation

    MagicMirror Forum

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

    Full Screen CSS

    Custom CSS
    4
    6
    5065
    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.
    • A
      allebone last edited by

      Curious, and I might be in the wrong section…

      I’m wanting to try using several modules but using this as a full screen digital signage option. How can I get the most use of the whole screen?

      Thank you,

      Bryan

      J 1 Reply Last reply Reply Quote 0
      • J
        j.e.f.f Project Sponsor Module Developer @allebone last edited by

        @allebone Are you referring to adjusting or eliminating the margin around the outside edges of the layout? If so, you need to add some rules in your custom.css file, like this:

        body {
          margin: 10px; /* Adjust this to taste */
        
          /* Also adjust these to subtract 2 x the value above */
          width: calc(100% - 20px);
          height: calc(100% - 20px);
        
        }
        

        If you want to eliminate the margin altogether, then the CSS looks like this:

        body {
          margin: 0;
          width: 100%;
          height: 100%;
        }
        
        1 Reply Last reply Reply Quote 1
        • A
          allebone last edited by

          I was using terrible words to describe, how I would actually like to use MagicMirror as more of an interactive Digital Signage platform. So leaving the Middle part open for Mirror is a waste of usable to space to me. Is that possible via CSS?

          Bryan

          Sean 1 Reply Last reply Reply Quote 0
          • Sean
            Sean Module Developer @allebone last edited by

            @allebone
            Of course.
            You can set the width of left, center, right for fitting full screen. By example, your left region could have 240px for narrow small information, center could have 1200px for displaying your main job, 520px for right region to show additional information modules. Anything possible. Most of the modules will be resized to the width of regions. (But I think you need to configure and adjust details for best looks)

            1 Reply Last reply Reply Quote 0
            • S
              sdetweil last edited by sdetweil

              I want to do the same thing here in my module, but I do NOT want to change the default css.

              in my code I calculate the size of the border and adjust my div size to be absolute, full screen, adding back the border size.

              but… there is some header at the top… left/right and bottom are ok…

              // if wrapper div not yet created
              		if(this.wrapper ==null)
              			// create it
              			this.wrapper = document.createElement("div");
              
              		// get the size of the margin, if any, we want to be full screen
              		var m = window.getComputedStyle(document.body,null).getPropertyValue('margin-top');
              		// set the style for the containing div
              		Log.log("body size="+document.body.clientWidth+"+"+document.body.clientHeight+" margin="+m);
                              // set the div size and position, overlay the body margins
              		this.wrapper.style.position = "absolute";
              		this.wrapper.style.width  = document.body.clientWidth+(parseInt(m)*2)+"px";
              		this.wrapper.style.height = document.body.clientHeight+(parseInt(m)*2)+"px";
              		this.wrapper.style.left = 0;
              		this.wrapper.style.top = document.body.clientHeight+(parseInt(m)*2);
              
              		this.wrapper.style.backgroundColor = this.config.backgroundColor;		
              		this.wrapper.style.border = "none";
              		this.wrapper.style.margin = "0px";
              		this.wrapper.style.opacity = self.config.opacity;			
              

              the html says

              <body>
              	<div class="region fullscreen below"><div class="container"></div></div>
              	<div class="region top bar">
              		<div class="container"></div>
              

              what does ‘below’ mean?
              there is another ‘fullscreen’ with ‘above’

              	<div class="region fullscreen above"><div class="container"></div></div>
              

              when u set your module position to fullscreen, where is that?

              if I change the css, then it works, but I don’t want to do this

              body {
                margin: 0px; /* This will give you a 20px border.   */
                height: 100%;
                width:100%;
              }
              
              .region.fullscreen {
                position: absolute;
                top: -30px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                pointer-events: none;
              }
              

              if I try to position the div +30 higher, without the css change, I can’t get above the header for some reason

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

                @sdetweil
                Of course, there are many tricks to display something to specific region.

                .fullscreen.below is the lowest layer of region system of MM. its position is already absolute and fit for screen size. If you put some module here, it will be displayed like background.
                .fullscreen.above is the highest layer. If you put some module here, it will cover the lower region layer.

                And, modifying CSS is safer and easier option than hardcoded in the module itself. Therefore there is “custom.css” for customization.

                The main reason you are confused might be this;
                In main.css

                body {
                  margin: 60px;
                  position: absolute;
                  height: calc(100% - 120px);
                  width: calc(100% - 120px);
                

                It gives 60px margin for the entire screen. So YOUR_FULLSCREEN module couldn’t cover the WHOLE_SCREEN_YOU_THOUGHT. But I recommend you leave it. Because, some ppl needs those margin for their mirror edge. Who don’t need that margin will modify his custom.css for using fullscreen without margin by himself.
                I think you’d better to research some BACKGROUND-IMAGE modules to get a hint to use full screen CSS. I believe it’s enough to put your module with 100% width/height into .fullscreen.below or .fullscreen.above to display your module as full screen size.

                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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy