Is there a way . . .

Mykle1

@johnnyboy Yeah, that one’s a keeper

BKeyport

@strawberry-3-141 Just found this, bless you. Should be in the magic mirror documentation.

j.e.f.f

@strawberry-3-141 said in Is there a way . . .:

@Mykle1 put that in custom.css

body {
  margin: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

Might I suggest a small change… 100% can be interpreted by the browser in unexpected ways under certain circumstances. Sometimes when you specify 100% for height, the browser interprets this to mean 100% of the width. This is a safer way to do it:

body {
  margin: 20px;
  height: calc(100vh - 40px);
  width: calc(100vw - 40px);
}

vh stands for Viewport Height, similarly vw stands for Viewport Width. Viewport width and height refer to the browser window’s interior size, or in the case of an iFrame, the iFrame’s interior size – essentially the space in which the HTML DOM is visible. A value of 1vw is equal to 1% of the viewport’s width, 33vh is equal to 33% of the viewport’s height, etc.

vw and vh are especially useful when you want to scale elements relative to the available screen space.

BKeyport

dang. For some reason, that brings it even tighter to the edges than %. Weird.

I highly recommend the following for use on the official 7" touchscreen display. Gets you the maximum screen usage.

(I have a mini-display magic mirror for work.) :)

body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}

michael5r

@bkeyport said in Is there a way . . .:

dang. For some reason, that brings it even tighter to the edges than %. Weird.

I highly recommend the following for use on the official 7" touchscreen display. Gets you the maximum screen usage.

(I have a mini-display magic mirror for work.) :)

body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}

If your margin is 0px, there’s no need to subtract anything from the height and width - they could just be 100vh and 100vw respectively.

A Former User

:root {
  --body-margin : 20px;
}

body {
  margin: var(--body-margin);
  width: calc(100vw - var(--body-margin) * 2);
  height: calc(100vh - var(--body-margin) * 2);
}

BKeyport

@michael5r Actually, if I don’t subtract, the margins run clear off the right side and bottom of the screen, using the official 7" touchscreen, those subtractions bring it back to 100%

BKeyport

@sean Can you explain your body code a bit? I’m not quite following it.

A Former User

@bkeyport
In modern CSS, you can use variables. If you are using values referenced frequently or dependently, you can set that value as variables.
In prior example, --body-margin is defined. Now you can use it instead static fixed value 20px. So when you have to change that value, just modify --body-margin once.

BKeyport

This is the part that’s getting me…

width: calc(100vh - var(–body-margin) * 2);
height: calc(100vw - var(–body-margin) * 2);

If I’m reading this correctly - it’s taking the calculation of 100% of the viewpoint(direction) - the margin defined in the varible multiplied by 2?

100% of the viewport height minus 40 pixels in your example?

A Former User

@bkeyport
Yes. you are right.
Just one point, user-defined property should be start with -- not -

sdetweil

@bkeyport margin is both sides, or top and bottom. All the way around.

If u look at the original the width is hard coded at 100%- 2 times the margin value

BKeyport

@sdetweil so, then because I have to use the following:

body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}

am I correct in assuming that magicmirror sees the screen a few pixels bigger than it really is - and that’s being expressed by running off the right and bottom of the screen when I don’t have the 10px subtract from height, and the 5px subtract from width?

sdetweil

@bkeyport I also had a heck of a time modifying body to get a fullscreen image.
I finally changed to use the .fullscreen.above css setting. I was also worried that if I required body to be changed and some else’s module also required body changed, then the conflict would mess up my display.

michael5r

@bkeyport said in Is there a way . . .:

@sdetweil so, then because I have to use the following:
body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}
am I correct in assuming that magicmirror sees the screen a few pixels bigger than it really is - and that’s being expressed by running off the right and bottom of the screen when I don’t have the 10px subtract from height, and the 5px subtract from width?

No - the screen is the size it is.

Your CSS above doesn’t make sense (you’re setting a body height that’s 10px smaller than the window height). If you set the body height to be 100vh and you get a vertical scrollbar, it’s because of another margin that’s pushing the body element.

In general, it’s good practice to also do:

html {
    margin: 0;
    padding: 0;
}

to avoid situations like this.

BKeyport

@michael5r - Actually, I don’t get scrollbars at all. If I don’t subtract back from the 100vh/100vw or 100% - It’ll just run off the edge of the screen as if the system is seeing the screen (In this case, the RasPi’s 7" touchscreen) bigger than it is. With it set the way I have it, everything is dead on edge, giving the maximum use of the screen.

michael5r

@bkeyport said in Is there a way . . .:

@michael5r - Actually, I don’t get scrollbars at all. If I don’t subtract back from the 100vh/100vw or 100% - It’ll just run off the edge of the screen as if the system is seeing the screen (In this case, the RasPi’s 7" touchscreen) bigger than it is. With it set the way I have it, everything is dead on edge, giving the maximum use of the screen.

I’m glad it works for you, but it still doesn’t make any sense :)

j.e.f.f

@michael5r the CSS is also set to hide overflow on the body so even if the CSS defines a screen size larger than 100% you won’t get scroll bars. You’ll just get the contents pushing off screen or at least not centred.

michael5r

@j-e-f-f Sure, that’s the magic of the overflow: hidden style. But what puzzles me is this:

An example:
If you run a webpage in fullscreen mode (either through Electron using Chromium or in a regular browser), and style the body like this:

body {
    background-color: #333;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

you will have a grey area that takes up the entire width & height of your screen.

If, on the other hand, you styled the body tag like this:

body {
    background-color: #333;
    width: calc(100vw-10px);
    height: calc(100vh-10px);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

you will have a grey area that is 10px shorter and narrower than the available screen space.

The only reason this wouldn’t be the case is if the html tag has a margin or padding (which would restrict the amount of space available to the body tag) or if you’ve specified a specific screen size directly in Electron (using electronOptions.width and electronOptions.height).

It’s no different than the standard body styles defined in MagicMirror’s main.css file - in there, a margin of 60px is set and then the height & width are set with width: calc(100%-120px) and height: calc(100%-120px) respectively.