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 23.6k 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.
    • johnnyboyJ Offline
      johnnyboy @cowboysdude
      last edited by yawns

      @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'
      
      brobergB 1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor @johnnyboy
        last edited by

        @johnnyboy maxWidth isn’t specified for the WunderGround module. So you can’t use the same config option there as you could with MMM-History.

        Confusing I know, but most modules don’t use size settings in the config since it’s better to set that with css code.

        Custom css-code is put in the file custom.css that can be found in the css folder.

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

          @broberg

          Ah, ok… I was jumping ahead of myself there… so I will try

          .MMM-WunderGround {
              width : 200px;
          }
          

          200px; or whatever looks good.
          Thanks again.

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

            I changed mines to 250px as that was about maxed out or else it would move the large Moon icon onto top bar and would become 1/3 of its original size and not look right, or look good… so I’m pretty happy at that.

            However, I thought to do the same thing to the calendar that’s directly opposite, on the top right…to keep the aspect look… Nope! It wont budge for some reason?
            Side effect now is a slight 5 - 7 second load time to WunderGround, Calendar, and News feed on bottom bar… No idea if this is linked or no?No effect at all on Compliments or SimpleLogo.
            .Module_calendar {
            width : 250px;
            }

            No idea if this is relevant, but should I have included the calendar header Uk Holidays? My calendar is also linked to Google Calendar so no idea if that could be a reason either why it wont allow width to be adjusted, but thought to mention

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

              @johnnyboy I think it should be just .calendar not .Module_calendar

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

                @broberg
                ok will try that now… Yes that did it… I didn’t know not to include .Module there… Thought they all had the same command, apart from MMM

                1 Reply Last reply Reply Quote 0
                • D Offline
                  deadherring
                  last edited by

                  Hi,

                  I have my MM configured vertically and a lot of the calendar entries get cut off. I’m trying to widen the calendar.

                  This is what I’ve added to custom.css but I’m not seeing any change. (sorry, I’m not sure how to make the code show up in a special way the way others do)

                  body {
                  .MMM-calendar {
                  width : 350px;
                  }
                  }

                  Can someone point me in the right direction in terms of what I’m doing wrong?

                  Thanks,

                  Nathan

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

                    @deadherring

                    .calendar {
                    width : 350px;
                    }
                    

                    It’s not supposed to be inside the body{} and since it is a default/stock module it doesn’t use the MMM prefix like other modules does so the class name of the module is just .calendar

                    1 Reply Last reply Reply Quote 1
                    • D Offline
                      deadherring
                      last edited by

                      Thanks @broberg, that worked, I can see that changes I make are taking effect now.

                      I set the calendar to 450px. However, as you can see from this
                      picture, the date text just shifted over to the right and is now covering the weather forecast, rather than the text from the calendar entry expanding. What I’m trying to accomplish is to get the full calendar item text to show. Is there a way to do that?

                      Thanks,

                      Nathan

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

                        @deadherring said in Changing Module Display Width:

                        Thanks,
                        Nathan

                        Readjust it to a number that works to get it away from the weather… you have it at 450, try 400.

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

                          @deadherring add maxTitleLength : 50, in the calendar config, default is set to 25

                          1 Reply Last reply Reply Quote 0
                          • D Offline
                            deadherring
                            last edited by

                            Thanks, that worked!

                            One thing I’m seeing is that my work calendar (Exchange) is not showing. I have A Google calendar that is updating but the Exchange is not. I can configure with a .ics file and .html and neither seems to work. If I copy and paste the Exchange url from config.js to a web browser it works fine, but it is not updating on the MagicMirror. I tried restarting the Pi but no go.

                            Any ideas on how I can troubleshoot? I haven’t updated the MM software in a few months, so I doubt I’m on the latest version.

                            Thanks,

                            Nathan

                            1 Reply Last reply Reply Quote 0
                            • S Offline
                              Srikanth 666 @cowboysdude
                              last edited by

                              @cowboysdude
                              It’s not working, it’s showing error
                              what can I do

                              1 Reply Last reply Reply Quote 0

                              Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                              Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                              With your input, this post could be even better 💗

                              Register Login
                              • 1
                              • 2
                              • 1 / 2
                              • 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