• 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.

Two side by side modules in the same region

Scheduled Pinned Locked Moved Solved Troubleshooting
13 Posts 3 Posters 3.3k 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 @sdetweil
    last edited by Jan 20, 2020, 1:57 PM

    @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 Jan 20, 2020, 2:03 PM

      @sdetweil - Sorted :-)

      1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil
        last edited by Jan 20, 2020, 2:07 PM

        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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        T M 2 Replies Last reply Jan 20, 2020, 3:23 PM Reply Quote 0
        • T Offline
          tenpinmark @sdetweil
          last edited by Jan 20, 2020, 3:23 PM

          @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 Jan 20, 2020, 3:31 PM Reply Quote 0
          • S Away
            sdetweil @tenpinmark
            last edited by Jan 20, 2020, 3:31 PM

            @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)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            T 1 Reply Last reply Jan 20, 2020, 3:50 PM Reply Quote 0
            • T Offline
              tenpinmark @sdetweil
              last edited by Jan 20, 2020, 3:50 PM

              @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 Apr 20, 2021, 2:22 PM

                @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 Apr 20, 2021, 2:34 PM Reply Quote 0
                • S Away
                  sdetweil @miniashman
                  last edited by sdetweil Apr 20, 2021, 2:35 PM Apr 20, 2021, 2:34 PM

                  @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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  M 1 Reply Last reply Apr 20, 2021, 2:53 PM Reply Quote 0
                  • M Offline
                    miniashman @sdetweil
                    last edited by Apr 20, 2021, 2:53 PM

                    @sdetweil sure have been working on custom.css on other modules. Just need some guidance and will figure it out. Was just wondering where to have this code and how to define both modules

                    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
                    		}
                    	}	
                    
                    
                    S 1 Reply Last reply Apr 20, 2021, 3:36 PM Reply Quote 0
                    • S Away
                      sdetweil @miniashman
                      last edited by Apr 20, 2021, 3:36 PM

                      @miniashman i was showing u code from one of my modules, its not complete as it was shown

                      but u can use style

                      float and left or right

                      https://www.w3schools.com/cssref/pr_class_float.asp

                      to make the module content move

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      M 1 Reply Last reply Apr 20, 2021, 4:23 PM 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