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.

    Trying to modify dimensions of module MMM-RAIN-RADAR

    Scheduled Pinned Locked Moved Development
    9 Posts 6 Posters 2.0k Views 5 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.
    • T Offline
      theaddies
      last edited by

      I am new to this so I apologize for the simplistic question. I am struggling to modify the size of this plugin. It is a very long rectangle and I would like it to be more square. I don’t see any dimension information in the module config. There are dimensions, 270 & 480 in the .js file, but I don’t know javascript so I am struggling with what to modify. I don’t think the dimensions I am seeing are actually 480x270. It is more like 800x200.

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        Have you any iframe css active that might override the height and width?

        You could try this in your custom.css :

        .MMM-RAIN-RADAR .iframe {width: 300px; height: 300px}
        
        M 1 Reply Last reply Reply Quote 0
        • M Offline
          maddmurph @broberg
          last edited by

          @broberg said in Trying to modify dimensions of module MMM-RAIN-RADAR:

          .MMM-RAIN-RADAR .iframe {width: 300px; height: 300px}

          How do you add that to the custom css?

          1 Reply Last reply Reply Quote 0
          • B Offline
            BD0G
            last edited by

            There is a subdirectory named css below the main MagicMirror directory. Within that subdirectory one should find a file named custom.css. Open this file with the built in text editor by right clicking upon the file and choosing Text Editor.

            Then copy the code above by highlighting it and then right clicking and choosing copy or highlighting it and pressing CTRL-C .
            Then create a line within the custom.css by clicking below the body statements and then Right Click and Choose Paste or press CTRL-V

            Make sure that this code is NOT within the brackets that specify body, but instead below those entries.

            M 1 Reply Last reply Reply Quote 1
            • M Offline
              maddmurph @BD0G
              last edited by

              @BD0G ahhhh I put it in the body brackets. I’ll try outside of them. Thanks!

              1 Reply Last reply Reply Quote 1
              • M Offline
                mcneilp
                last edited by

                I am having the same trouble. This line of code seems to set the iframe height to 50vh. I have no idea what “vh” is.

                iframe.style = “border:0;height:50vh”;

                In my custom CSS i had to use:

                .MMM-RAIN-RADAR .iframe {
                width: 300px;
                height: 300px !important
                }

                I added the !important to get it to override this other inline style which seems to be ill formed.

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

                  @mcneilp vh is a percentage of view height, vw is view width…

                  you would use these instead of hard coded number of pixels (99px),
                  caus eon big screens the number of pixles change the percentage of vh would keep the look the same

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  M 1 Reply Last reply Reply Quote 0
                  • M Offline
                    mcneilp @sdetweil
                    last edited by

                    @sdetweil
                    interesting. I have never used “vh” as a unit before. Haven’t done much CSS in a while though.

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

                      @mcneilp 50vh is 1/2 the screen height, 100vh is full height

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      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 Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy