how to set module div for fullscreen

sdetweil

I am trying to fix MMM-ImagePhotos and MMM-Slideshow to not truncate portrait images or zoom in some landscape images…

i have them almost completely fixed, except a small section of the screen at the bottom starting in the middle of the rss feed output and below…
https://www.dropbox.com/s/jnudtn8wpef4ba5/IMG_20180925_125325.jpg?dl=0

https://www.dropbox.com/s/gt1nxxwxkymgyic/IMG_20180925_125340.jpg?dl=0
the updated code does

                // create the div for this module
		var wrapper = document.createElement("div");
                       // set its size to the full display area
			wrapper.style.width  = document.body.clientWidth;
			wrapper.style.height = document.body.clientHeight;
                        // set the div position
			wrapper.style.left = 0;
		        wrapper.style.top = document.body.clientHeight;
                        // make position relative
			wrapper.style.position = "relative";
                       // set a background color to improve the looks
			wrapper.style.backgroundColor = self.config.backgroundColor;
			// turn off any border
			wrapper.style.border = "none";
                        // use users opacity setting
			wrapper.style.opacity = self.config.opacity;

if I use position=“absolute” for the div it looks like this

https://www.dropbox.com/s/k0i4hror1rx9tp5/IMG_20180925_125427.jpg?dl=0

how can I get rid of the bottom bar?

it looks worse on a different tv (both devices are TVs, not monitors)
https://www.dropbox.com/s/shly9zuo8hhb3bn/IMG_20180925_125243.jpg?dl=0

why don’t my pics show when I use the Picture info wrapper?

sdetweil

so close…

client Height/Width is the screen, but the body has height/width reduced by margins…

how can I get the size of the margin in javascript to do the corrections programatically?

strawberry 3.141

@sdetweil there are units called view width and view height, try those

100vw and 100vh

sdetweil

@strawberry-3-141 thanks… sadly this re-introduces the margins in both dimensions

sdetweil

here is another way.

window.getComputedStyle(document.body).getPropertyValue('margin-top');

now… i forgot that I had a custom.css to eliminate the margins.

but the fullscreen style still has the -60 adjustments for the default border

sdetweil

Using the fullscreens.above class for the div makes this a lot easier. No modification of the std css is required

UNSOLVED how to set module div for fullscreen