Full Screen CSS

allebone · Nov 16, 2017, 4:34 AM

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.e.f.f · Nov 16, 2017, 5:41 AM

@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%;
}

allebone · Nov 16, 2017, 9:50 PM

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

A Former User · Nov 17, 2017, 7:26 AM

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

sdetweil · Oct 8, 2018, 3:57 PM

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

A Former User · Oct 8, 2018, 4:11 PM

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