Two side by side modules in the same region

[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:

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

[sdetweil]

This post is deleted!

[tenpinmark]

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

[tenpinmark]

@sdetweil - Sorted :-)

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

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: