Two side by side modules in the same region

sdetweil

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

tenpinmark

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

sdetweil

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

tenpinmark

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

miniashman

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

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

miniashman

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

sdetweil

@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

miniashman

@sdetweil cool… will experiment :thumbs_up: