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.

    Problem with the positioning of the mirror modules. Cut from the top

    Scheduled Pinned Locked Moved Troubleshooting
    4 Posts 2 Posters 1.2k Views 3 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.
    • M Offline
      majdzik84
      last edited by

      Hi. please help.
      I lost my SD card and moved the installation to the SSD. Everything is ok except one thing.
      In the lower part of the mirror I have the MMM-iFrame module, I throw off the dasboard from Home assistant.
      Unfortunately, when starting / restarting the mirror, as you can see in the screenshot, the whole thing moves up and the upper modules are cut off.
      Interestingly, it sometimes loads correctly.
      When I remove the iframe module it loads as it should.

      Any suggestions on how I can fix this?
      e098450f-6aaf-4c52-9e96-94715e102697-image.png

      BKeyportB 1 Reply Last reply Reply Quote 0
      • BKeyportB Offline
        BKeyport Module Developer @majdzik84
        last edited by

        Couple of things you can do.

        1- Check where your modules are positioned, they should bounce out of the way if they are in a different position than the iFrame module. (iframe should be bottom_something, and other modules be top_something)

        2- Add css to custom.css to use the entire monitor space to give you a bit more room:

        body {
        	margin: 0px;
        	height: 100vh;
        	width: 100vw;
         }
        

        3- it does appear your iframe module is a bit too tall - if you’re using MMM-iFrame - change your “height” to be a few less pixels to lower it’s chances. (30 or so should do it)

        The "E" in "Javascript" stands for "Easy"

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          majdzik84 @BKeyport
          last edited by

          @BKeyport Thank you for your willingness to help.
          Unfortunately, I tried all the advice but nothing has changed :(
          It loads ok once in a few tries, but in most cases the whole screen is moved up.
          https://www.dropbox.com/s/ftc0abrnntcz9i0/VID_20210226_095022.mp4?dl=0

          modules: [
          {
            module: 'MMM-iFrame',
            position: 'bottom_center', 	// This can be any of the regions. 
            disabled: false,
            config: {
          	// See 'Configuration options' for more information.
               url: ["http://192.168.2.98:8123/magic-mirror/kamera?kiosk"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL. 
               autoRefresh: false,
          	//	updateInterval: 0.5 * 60 * 1000, // rotate URLs every 30 seconds
               width: "1440", // width of iframe 
               height: "425", // height of iframe 
               frameWidth: "1440", // width of embedded iframe, height is beeing calculated by aspect ratio of iframe
            }
          },
          		{
          			module: "alert",
          			config: {
          				effect: "genie",} 
          		},
          		{
          			module: "updatenotification",
          			position: "top_bar"
          		},
          		{
          			module: "clock",
          			position: "top_left"
          		},
          		{
          			module: "calendar",
          			header: "KALENDARZ",
          			position: "top_left",
          			config: {
                          maximumEntries: 7,
                          maximumNumberOfDays: 365,
                          showLocation: false,
                          maxTitleLength: 25,
                          maxLocationTitleLength: 25,
                          wrapEvents: true,
                          wrapLocationEvents: false,
                          maxTitleLines: 3,
                          maxEventTitleLines: 3,
                          animationSpeed: 2000,
                          fade: false,
                          fadePoint: 0.25,
                          displayRepeatingCountTitle: true,
                          dateFormat: "MMM Do HH:mm",
                          dateEndFormat: "MMM Do HH:mm",
                          //showEnd: true,
                          fullyDayEventDateFormat: "MMM D",
                          timeFormat: "absolute",
                          getRelative: 6,
                          urgency: 1,
                          broadcastEvents: true,
                          hidePrivate: false,
                          sliceMultiDayEvents: false,
                          nextDaysRelative: true,
          				colored: true,
          				calendars: [{
          						symbol: "calendar-check-o",
          						url: "https:/basic.ics"
          					},
          {
          						symbol: "birthday-cake",
          						color: '#27b7e3',
          						url: "https://calendar.google.com/"
          					},
          {
          						symbol: "trash-alt",
          						color: '#ebd234',
          						url: "https://calendar.google.com/.ics"
          					},
          					
          {						
          						symbol: "calendar-times",
          						color: "#ff3b29",
          						url: "https://www.thunderbird.net/media/caldata/PolishHolidays.ics"
          					}]
          			}
          		},
          {
          	module: "MMM-Currentweather-MQTT",
          	disabled: false,
          	position: "top_right",
          	config: {
          				location: "Potępa",
          				locationID: "3094597", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
          				appid: "xxxx",
          		roundTemp: false,
          		degreeLabel: true,
          		showWindDirection: true,
          		showWindDirectionAsArrow: true,
          		showHumidity: true,
          		showFeelsLike: true,
          		useBeaufort: false,
          		useKMPHwind: true,
          		logging: true,
          		useWildcards: false,
          		showTempMax: true,
          		showTempMin: true,
          		mqttServers: [
          			{
          				address: '192.168.2.98',  // Server address or IP address
          				port: '1883',                // Port number if other than default
          				user: 'xxx',
          				password: 'xxx!',
          				subscriptions: [             // for now, all seven values must be 
          				                             // specified in the config, 
          							     // even if they are not delivered and not displayed.
          					{
          						topic: 'mirror/pogoda/temperatura', // Topic to look for
          						suffix: '°C',             // Displayed after the value
          						decimals: 1,              // Round numbers to this number of decimals
          						sortOrder: 10,            // sortOrder 10 has to contain the temperature 
          						maxAgeSeconds: 18000,     // take Openweather value if older than 5 hours
          					},
          					{
          						topic: 'mirror/pogoda/wilgotnosc',
          						suffix: '%',
          						decimals: 0,
          						sortOrder: 20,            // sortOrder 210 has to contain the humidity
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'mirror/pogoda/temp_piec',
          						suffix: '°C',
          						decimals: 1,
          						sortOrder: 30,            // sortOrder 30 has to contain the illumination
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'mirror/pogoda/wiatr',
          						suffix: '°C',
          						decimals: 1,
          						sortOrder: 40,            // sortOrder 40 has to contain the wind speed
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'wetter/act-wind-dir',
          						suffix: '°',
          						decimals: 0,
          						sortOrder: 50,            // sortOrder 50 has to contain the wind direction
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'wetter/raining',
          						suffix: '',
          						decimals: 0,
          						sortOrder: 60,            // sortOrder 60 has to contain the boolean if its just raining
          						maxAgeSeconds: 18000,
          						conversions: [
          							{ from: "true", to: "tak" },
          							{ from: "false", to: "nie" }
          						]
          					},
          					{
          						topic: 'wetter/rain-today',
          						suffix: '',
          						decimals: 1,
          						sortOrder: 70,            // sortOrder 70 has to contain the amount of rain today
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'mirror/pogoda/max',
          						label: 'c',
          						suffix: '',
          						decimals: 0,
          						sortOrder: 80,
          						maxAgeSeconds: 180000,
          					},
          					{
          						topic: 'mirror/pogoda/min',
          						label: 'c',
          						suffix: '',
          						decimals: 0,
          						sortOrder: 90,
          						maxAgeSeconds: 180000,
          					},
          				]
          			}
                  ],
          	}
          },
          		{
          			module: "weatherforecast",
          			disabled: false,
          			position: "top_right",
          			header: "Prognoza pogody",
          			config: {
          				lang: "pl",
          				locationID: "xxx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
          				appid: "xxxx",
          				maxNumberOfDays: 4,
                                          //colored: "false",
                                          fade: false,
                                          //fadePoint: 1,
                                          showRainAmount: true,
                                          scale: false,
          								
          			}
          		}, 
          {
              module: 'MMM-MQTT',
              position: 'top_right',
              header: '',
              config: {
                  logging: false,
                  useWildcards: false,
                  mqttServers: [
                      {
                          address: '192.168.2.98',  // Server address or IP address
                          port: '1883',          // Port number if other than default
                          user: 'xxxx',          // Leave out for no user
                          password: 'xxxx!',  // Leave out for no password
                          subscriptions: [
                              {
                                  topic: 'mirror/pogoda/powietrze', // Topic to look for
                                  label: 'Powietrze jest', // Displayed in front of value
                                  suffix: '',         // Displayed after the value
                                  maxAgeSeconds: 350,    // Reduce intensity if value is older 
                              },
                              {
                                  topic: 'mirror/pogoda/temp_piec', // Topic to look for
                                  label: 'Temp.ogród: ', // Displayed in front of value
                                  suffix: '°C',         // Displayed after the value
                                  maxAgeSeconds: 350,    // Reduce intensity if value is older
          
                              },
          
                              {
                                  topic: 'mirror/pogoda/co2', // Topic to look for
                                  label: 'CO2 w salonie: ', // Displayed in front of value
                                  suffix: 'ppm',         // Displayed after the value
                                  maxAgeSeconds: 350,    // Reduce intensity if value is older
                                   colors: [             // Value dependent colors
                                      { upTo: 500, value: "green", label: "green", suffix: "green" },
                                      { upTo: 600, label: "yellow", value: "yellow", suffix: "yellow" },
                                      { upTo: 900, label: "#ff4d00", value: "#ff4d00", suffix: "#ff4d00" },
                                      { upTo: 2000, label: "red", value: "red", suffix: "red"  }, // The last one is used for higher values too
                                  ],
                              },
                          ]
                      }
                  ],
              }
          },
          
          {
            module: "MMM-NowPlayingOnSpotify",
            position: "center", 
            disabled: false,
            config: {
          	showCoverArt: true,
              clientID: "xxx",
              clientSecret: "xxx",
              accessToken: "xxxxx",
              refreshToken: "xxxx-xxxx"
          
            }
          },
          
          {
              module: 'MMM-Remote-Control'
              // uncomment the following line to show the URL of the remote control on the mirror
              //, position: 'bottom_left'
              // you can hide this module afterwards from the remote control itself
          
          },
          	]
          };
          
          /*************** DO NOT EDIT THE LINE BELOW ***************/
          if (typeof module !== "undefined") {module.exports = config;}
          
          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @majdzik84
            last edited by

            @majdzik84 Let’s invoke the CSS gods around here… Hey, @cowboysdude ? You got advice?

            @alberttwong if you’re still around, can you help?

            The "E" in "Javascript" stands for "Easy"

            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 / 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