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.

    Changing Module Display Width

    Scheduled Pinned Locked Moved General Discussion
    24 Posts 6 Posters 20.1k Views 6 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.
    • S Offline
      selym
      last edited by

      Hi all-

      I found a “today in history” type news feed, but the entries are a tad longer than what is displaying. How would I adjust the viewing area for a module? FYI, not a coder/developer/programmer…just a DIY hobbyist that thought this looked like something fun to try. Thanks!

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

        @selym

        in the custom.css

        add

        .MMM-modulename {
            width : 200px;
        }
        

        Be shure to get the module name exactly right (case sensitive and all).
        Do experiment with the width, 200px might be to small, it’s just an example to get you started.

        johnnyboyJ 1 Reply Last reply Reply Quote 2
        • johnnyboyJ Offline
          johnnyboy @broberg
          last edited by johnnyboy

          @broberg

          … so this will work for any module? Such as clock, calendar etc? Will this keep aspect, or is there another addition for height?

          Im not sure how custom css actually works, so excuse if this sounds dumb… but when entering the code in there do i jist hit save and thats it? Is a reboot needed before the alteration shows?

          , before or after… just exactly as you put it here?

          Tvmia

          brobergB 1 Reply Last reply Reply Quote 0
          • cowboysdudeC Offline
            cowboysdude Module Developer
            last edited by

            If it’s the one I made then it’s this:

            In the config.js it’s a config option:

             {
                module: 'MMM-History',
                position: 'top_right',
                     config: {
            	 maxWidth: "325px"
            		}
                      },
            
            johnnyboyJ S 2 Replies Last reply Reply Quote 1
            • johnnyboyJ Offline
              johnnyboy @cowboysdude
              last edited by

              @cowboysdude

              Perfect thanks

              cowboysdudeC 1 Reply Last reply Reply Quote 1
              • cowboysdudeC Offline
                cowboysdude Module Developer @johnnyboy
                last edited by

                @johnnyboy said in Changing Module Display Width:

                @cowboysdude

                Perfect thanks

                You’re welcome!

                You can also do this:

                 {
                    module: 'MMM-History',
                    position: 'top_right',
                         config: {
                	 maxWidth: "33%"
                		}
                          },
                
                johnnyboyJ 1 Reply Last reply Reply Quote 1
                • brobergB Offline
                  broberg Project Sponsor @johnnyboy
                  last edited by

                  @johnnyboy It will change the height/width of the module “container”, it will not affect the size of objects, images or fonts. Normally the module “container” will adapt to the size of it’s content. but with the width/height specified you force it to be a set width/height.

                  johnnyboyJ 1 Reply Last reply Reply Quote 2
                  • johnnyboyJ Offline
                    johnnyboy @broberg
                    last edited by

                    @broberg

                    Ahhhhhhhhh… Gotcha ;-)… reduce the % of the container also reduces it’s contents in relation. Thanks.

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

                      @johnnyboy well, not entirely, the content (text etc.) don’t change in size, all you do is changing the surface that the content can take up.

                      like moving from a big garage to a small, you still have the same amount of stuff but less area to put it in, so the stuff that doesn’t fit spills over and out on to the yard.

                      johnnyboyJ 1 Reply Last reply Reply Quote 1
                      • johnnyboyJ Offline
                        johnnyboy @broberg
                        last edited by

                        @broberg
                        Oh, ok… Well I will play about with it anyway just to see what that does to it… just so I will know for experience as its another learning curve i’ve learned

                        brobergB 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • 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