MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.25.0 is available! For more information about this release, check out this topic.

    UNSOLVED Region/module positioning on Servermode (on docker, Synology) and client (web-browser)

    Troubleshooting
    1
    2
    578
    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
      skibro last edited by

      Hi MagicMirror Builders!

      I’ve got stuck with the positioning of modules/regions. My setup:

      MagicMirror2 running in servermode in a docker container on a Synology.
      The client would be a tablet (untill I fix a monitor and a PI), I am planning to show the info board in a browser.

      Setup is finished, I am able to install/config modules, apply css. The problem is that when I open the ip of the mirror in a browser, the alignment of the regions is not ok. It seems like the _left and _right regions are just on top each other. I tried to modify the “body” in the custom.css, it works (the modules become wider), but the alignment is the same, I can not place the top_left and top_right regions nex to each other.

      I have no experience in css or js, but tried to find a solution on the forum, without luck. Can you please point me in the right direction? How could I set the window size for the MM?

      My modules config:

      modules: [
      		
      		{
      			module: "clock",
      			position: "top_right"
      		},
      		
      		{
      			module: "currentweather",
      			position: "top_left",
      			config: {
      				location: "Lidingö",
      				locationID: "",  //ID from http://bulk.openweathermap.org/sample/; unzip the gz file and find your city
      				appid: ""
      			}
      		},
      		{
      			module: "weatherforecast",
      			position: "top_left",
      			header: "Weather Forecast",
      			config: {
      				location: "Lidingö",
      				locationID: "",  //ID from https://openweathermap.org/city
      				appid: ""
      			}
      		},
      		{
      
      

      0_1558037968869_Screenshot 2019-05-16 at 22.18.21-squashed.jpg

      Thanks in advance!
      Balint

      1 Reply Last reply Reply Quote 0
      • S
        skibro last edited by

        A short update: I was able to move the modules manually using css. It seems to work but it’s not an elegant solution. Any ideas/suggestions how to do it right?

        0_1558509939513_Screenshot 2019-05-21 at 23.30.34.png

        tml {
        	height: 1080px;
        	width: 1920px;
        }
        
        header {
        	text-transform: uppercase;
        	font-size: 26px;
        	font-family: "Roboto Condensed";
        	font-weight: 600;
        	border-bottom: 1px solid white;
        	line-height: 15px;
        	padding-bottom: 5px;
        	margin-bottom: 10px;
        	color: cadetblue;
        }
        
        body {
        	margin: 10px;
        	position: absolute;
        	height: 1080;
        	width: 1920px;
        	background-color: rgba(214, 214, 214, 0.8);
        	background-repeat: no-repeat;
        	/*background-size: 1920;*/
        	font-family: "Roboto Condensed", sans-serif;
        	font-weight: 400;
        	font-size: 2em;
        	line-height: 1.5em;
        	-webkit-font-smoothing: antialiased;
        }
        
        .region.top.left .container .module.currentweather {
        width: 400px;
        height: 250px;
        position: absolute;
        left: 90px;
        top: 90px;
        background-color: rgba(20, 102, 186, 0.5); /*kek*/
        }
        
        
        .module.clock {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 760px;
        top: 90px;
        background-color: rgba(80, 196, 0, 0.5); /*zold*/
        }
        
        .region.top.right .container .module.MMM-SL-PublicTransport {
        width: 400px;
        height: 500px;
        position: absolute;
        left: 1490px;
        top: -00px;
        background-color: rgba(20, 102, 186, 0.5);
        }
        
        .region.bottom.bar .container {
        width: 1740px;
        height: 310px;
        position: absolute;
        left: 90px;
        top: 680px;
        background-color: rgba(247, 173, 236, 0.5); /*magente*/
        }
        
        
        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy