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

Changing Module Display Width

Scheduled Pinned Locked Moved General Discussion
24 Posts 6 Posters 19.4k 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 Feb 17, 2017, 9:49 PM

    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!

    B 1 Reply Last reply Feb 17, 2017, 10:40 PM Reply Quote 0
    • B Offline
      broberg Project Sponsor @selym
      last edited by broberg Feb 17, 2017, 10:41 PM Feb 17, 2017, 10:40 PM

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

      J 1 Reply Last reply Feb 22, 2017, 10:50 AM Reply Quote 2
      • J Offline
        johnnyboy @broberg
        last edited by johnnyboy Feb 22, 2017, 10:57 AM Feb 22, 2017, 10:50 AM

        @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

        B 1 Reply Last reply Feb 22, 2017, 3:49 PM Reply Quote 0
        • C Offline
          cowboysdude Module Developer
          last edited by Feb 22, 2017, 2:47 PM

          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"
          		}
                    },
          
          J S 2 Replies Last reply Feb 22, 2017, 2:49 PM Reply Quote 1
          • J Offline
            johnnyboy @cowboysdude
            last edited by Feb 22, 2017, 2:49 PM

            @cowboysdude

            Perfect thanks

            C 1 Reply Last reply Feb 22, 2017, 3:31 PM Reply Quote 1
            • C Offline
              cowboysdude Module Developer @johnnyboy
              last edited by Feb 22, 2017, 3:31 PM

              @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%"
              		}
                        },
              
              J 1 Reply Last reply Feb 22, 2017, 4:57 PM Reply Quote 1
              • B Offline
                broberg Project Sponsor @johnnyboy
                last edited by Feb 22, 2017, 3:49 PM

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

                J 1 Reply Last reply Feb 22, 2017, 3:53 PM Reply Quote 2
                • J Offline
                  johnnyboy @broberg
                  last edited by Feb 22, 2017, 3:53 PM

                  @broberg

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

                  B 1 Reply Last reply Feb 22, 2017, 4:00 PM Reply Quote 1
                  • B Offline
                    broberg Project Sponsor @johnnyboy
                    last edited by Feb 22, 2017, 4:00 PM

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

                    J 1 Reply Last reply Feb 22, 2017, 4:16 PM Reply Quote 1
                    • J Offline
                      johnnyboy @broberg
                      last edited by Feb 22, 2017, 4:16 PM

                      @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

                      B 1 Reply Last reply Feb 22, 2017, 4:19 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 1 / 3
                      1 / 3
                      • First post
                        1/24
                        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