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

Is there a way . . .

Scheduled Pinned Locked Moved Troubleshooting
23 Posts 8 Posters 7.5k Views 8 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.
  • B Offline
    BKeyport Module Developer @strawberry 3.141
    last edited by Dec 11, 2018, 7:58 PM

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

    The "E" in "Javascript" stands for "Easy"

    1 Reply Last reply Reply Quote 0
    • J Offline
      j.e.f.f Project Sponsor Module Developer @strawberry 3.141
      last edited by Dec 11, 2018, 8:12 PM

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

      1 Reply Last reply Reply Quote 2
      • B Offline
        BKeyport Module Developer
        last edited by BKeyport Dec 11, 2018, 8:36 PM Dec 11, 2018, 8:36 PM

        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);
        }

        The "E" in "Javascript" stands for "Easy"

        M 1 Reply Last reply Dec 17, 2018, 4:16 PM Reply Quote 0
        • M Offline
          michael5r Module Developer @BKeyport
          last edited by Dec 17, 2018, 4:16 PM

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

          B 1 Reply Last reply Dec 18, 2018, 10:44 AM Reply Quote 0
          • ? Offline
            A Former User
            last edited by A Former User Dec 18, 2018, 2:47 PM Dec 17, 2018, 6:07 PM

            :root {
              --body-margin : 20px;
            }
            
            body {
              margin: var(--body-margin);
              width: calc(100vw - var(--body-margin) * 2);
              height: calc(100vh - var(--body-margin) * 2);
            }
            
            B 1 Reply Last reply Dec 18, 2018, 10:47 AM Reply Quote 1
            • B Offline
              BKeyport Module Developer @michael5r
              last edited by Dec 18, 2018, 10:44 AM

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

              The "E" in "Javascript" stands for "Easy"

              1 Reply Last reply Reply Quote 0
              • B Offline
                BKeyport Module Developer @Guest
                last edited by Dec 18, 2018, 10:47 AM

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

                The "E" in "Javascript" stands for "Easy"

                ? 1 Reply Last reply Dec 18, 2018, 10:51 AM Reply Quote 0
                • ? Offline
                  A Former User @BKeyport
                  last edited by Dec 18, 2018, 10:51 AM

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

                  1 Reply Last reply Reply Quote 0
                  • B Offline
                    BKeyport Module Developer
                    last edited by Dec 18, 2018, 12:03 PM

                    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?

                    The "E" in "Javascript" stands for "Easy"

                    ? S 2 Replies Last reply Dec 18, 2018, 12:07 PM Reply Quote 0
                    • ? Offline
                      A Former User @BKeyport
                      last edited by Dec 18, 2018, 12:07 PM

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

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