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.

    Two side by side modules in the same region

    Scheduled Pinned Locked Moved Solved Troubleshooting
    13 Posts 3 Posters 3.4k 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.
    • T Offline
      tenpinmark
      last edited by tenpinmark

      I followed this thread as it seems to address what I want to do: Re: How to get 2 modules side by side? however, I do not seem to be getting the same results.

      To start with I would like the Worldclocks and WIFI Password QR code to be seen in the bottom_left region. I have the following code in my config and css files:

      {
      	module: 'worldclock',
      	position: 'bottom_left',
      	header: '',
      	config: {
      		timeFormat: 'HH:mm A', //defined in moment.js format()
      		style: 'left', //predefined 4 styles; 'top', 'left','right','bottom'
      		clocks: [
                                    {
                                        title: "London",
                                        timezone: "Europe/London",
                                        flag: "gb",
                                    },
      	                      {
      				  title: "Paris",
                                        timezone: "Europe/Paris",
                                        flag: "fr",
                                    },
                                    {
                                        title: "Perth",
                                        timezone: "Australia/Perth",
                                        flag: "au",
                                   },      
                                   {
                                        title: "New York",
                                        timezone: "America/New_York",
                                        flag: "us",
                                   },
                                   {
                                        title: "Colorado",
                                        timezone: "America/Denver",
                                        flag: "us",
                                   },
      			]
      		}
      },
      {
      	module: 'MMM-WiFiPassword',
      	position: 'bottom_left',
      	config: {
      		authType: "WPA",
      		network:  "Hackers_Delight",
      		password: "NotARealPa55word",
      	},
      },
      
      

      and in my css:

      /* CSS to control the placement of the world clocks and the WIFI QR  */
      /* to be within the same bottom left region but side by side and not */
      /* stacked on top of each other                                      */
      .MMM-WiFiPassword {
        display: inline-block;
        width: 45%;
        max-width: 45%;
        min-width: 45%;
        margin-left: 5%;
      }
      
      .worldclock {
        margin-right: 45%;
      }
      
      .region.bottom.left {
        width: 7220px;
        min-width: 720px;
        max-width: 720px;
      

      This gives me the following screen:
      screen grab

      By indication of the blue arrows, you can see what I’m attempting to do. The actual display os on a 43" TV so there is a lot of room between the left and the center regions which I was hoping to several small status modules into.

      Anyone able to teach the idiot here?

      Thanks though for reading
      Mark

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @tenpinmark
        last edited by

        This post is deleted!
        T 2 Replies Last reply Reply Quote 0
        • T Offline
          tenpinmark @sdetweil
          last edited by

          @sdetweil Yep - just saw that and was sorting out another solution to this - thanks though

          1 Reply Last reply Reply Quote 0
          • T Offline
            tenpinmark @sdetweil
            last edited by

            @sdetweil - Sorted :-)

            1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil
              last edited by

              in one of my modules, where I wanted to support multiple instances and still get side by side by config I did

              where config.float if specified was either ‘left’ or ‘right’

              if(this.config.float!== ""){
                      // get the MM div container for this module (parent of our wrapper div)
              	document.getElementById(this.identifier).style.float=this.config.float;			
                      // adjust the border between instances
              	if(this.config.spacing !==""){
              		if(this.config.float === "left")
              			document.getElementById(this.identifier).style.marginLeft=this.config.spacing
              	        else if(this.config.float === "right")
              			document.getElementById(this.identifier).style.marginRight=this.config.spacing
              		}
              	}	
              
              

              I’m not sure you can do this without some help from the module

              T M 2 Replies Last reply Reply Quote 0
              • T Offline
                tenpinmark @sdetweil
                last edited by

                @sdetweil - Many, many thanks for sharing this. I changed both modules to include your code, removed a custom CSS rule and bingo bango, side by side modules.

                Here is the full display now and you can see the result in the bottom left corner.
                MyMirror.

                Now I just have to work out what to do with these changed modules (I’m no developer, more of a use large hammer coder, so not sure how to make brances or changes to the original pulls so as to share my changes…) and I can see me adding this to several other modules now I can see how easy it is to do!

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @tenpinmark
                  last edited by

                  @tenpinmark start by going to the original module on github, and press the fork button, top right

                  now YOU have a complete copy of the module your self…

                  move the current one out of the way on you MM installation, and clone YOUR copy

                  then copy the modified files from the original into yours

                  git status should show the changed file(s)

                  then the commands are (i am in a hurry to leave)

                  fo each modified file
                  git add

                  then git commit -m " some message about the changes"
                  then git push to send those change up to your github forked copy
                  (will need your github userid/password… free signup)

                  then u can offer those changes to the module author,
                  via a pull request (hey, I have updates to your module you may want, you can PULL them from my repo)

                  T 1 Reply Last reply Reply Quote 0
                  • T Offline
                    tenpinmark @sdetweil
                    last edited by

                    @sdetweil Again, many thanks for your time and efforts in “teaching the idiot” here :-)

                    I’ll follow the instructions above and hope it contributes to the community here - one of the best!

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      miniashman @sdetweil
                      last edited by

                      @sdetweil i am trying to do the same thing. I want worldclock and WiFiPassword side by side in bottom_left. Where do I need to make the change? in the config.js file? and how do I define which modules I want there?

                      S 1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil @miniashman
                        last edited by sdetweil

                        @miniashman you will have to supply a custom.css entry to move one next to the other…

                        there is nothing butilin to do that

                        and u will have to learn css… there is no cut/paste answer

                        M 1 Reply Last reply Reply Quote 0
                        • 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