• 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 20.5k 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.
  • 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
                  • B Offline
                    broberg Project Sponsor @johnnyboy
                    last edited by broberg Feb 22, 2017, 4:20 PM Feb 22, 2017, 4:19 PM

                    @johnnyboy You can do a lot to the Magicmirror and it’s module just by editing the css,

                    Here is a good reference for CSS : https://www.w3schools.com/css/

                    And css for beginners : http://www.htmldog.com/guides/css/beginner/

                    1 Reply Last reply Reply Quote 2
                    • J Offline
                      johnnyboy @cowboysdude
                      last edited by yawns Feb 23, 2017, 10:27 AM Feb 22, 2017, 4:57 PM

                      @cowboysdude said in Changing Module Display Width:

                       {
                          module: 'MMM-History',
                          position: 'top_right',
                               config: {
                      	 maxWidth: "33%"
                      		}
                                },
                      

                      Oooooo MM didn’t like that :-) So I musta entered something wrong or didn’t enter something I should have? Can you please guide me to what part I did wrong here?

                       {
                          module: 'MMM-WunderGround',
                          position: 'top_left',
                               config: {
                      	 maxWidth: "33%"
                      		}
                                }, 
                      apikey: 'pws: mydetailshere',
                      hourly: '1',
                      fctext: '1'
                      
                      B 1 Reply Last reply Feb 22, 2017, 5:03 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 1 / 3
                      1 / 3
                      • First post
                        7/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