Want to display 2 modules side-by-side

[nakulbende]

Hey all,

I have two MBTA modules in my mirror - made possible by cloning the repo twice with changed name. So, the config.json looks like:

		// MBTA - Main x Emerson
		{
			module: 'MMM-MBTA',
			position: 'bottom_left', // This can be any of the regions.
			header: "MBTA: ",
			config: {
				apikey: '69a372ea82d748ad8531f55dd05d8df3',
				updateInterval: 60,
				stations: [ "Main St @ Emerson St" ], //[ "Davis Square" ]
				formatETA: true,
				maxEntries: 4,
				showOnly: ["Bus"],
				colorIcons: true,
				direction: 'Inbound',
			}
		},
		// // MBTA - Davis
		{
			module: 'MMM-MBTA1',
			position: 'bottom_left', // This can be any of the regions.
			header: "MBTA: ",
			config: {
				apikey: '69a372ea82d748ad8531f55dd05d8df3',
				updateInterval: 65,
				stations: [ "Davis Square" ],
				formatETA: true,
				maxEntries: 4,
				showOnly: ["Subway"],
				colorIcons: true,
				direction: 'Inbound',
			}
		},

And the bottom of my mirror looks like:

I would like to have these modules side by side (see below). There are pretty complicated answers on this forum, and I could not get a simple straightforward way to do that with css. Is it possible?

PS: Bonus gratitude for solving the desaturation of one of the modules. They have renamed css, folders and .json files. But one shows colors, other appears only white.

[sdetweil]

@nakulbende said in Want to display 2 modules side-by-side:

But one shows colors, other appears only white.

you have to do the css stuff by moduleName… so duplicate that too

[sdetweil]

@nakulbende each position is a stack, 1st is on top, next is below it, etc…

most modules don’t have capability to align like u want.

I did one last year for a guy in Rome… but u have to change the code…

this is for the same module, invoked multiple times (I think i had 5 going at once in test)
as part of getDom()
spacing is amount of pixels between instances
float is left/right to align

if(this.config.float!== ""){
			document.getElementById(this.identifier).style.float=this.config.float;
			
			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
			}
		}	

but took coding to make multiple instances run… this ‘might’ work for the multiple modules…

[nakulbende]

Apologies that I cant upload the photos. For some reason, the forum is throwing an error. So I just made 2 instances of the repo - renamed everything from folder, .css and .js files inside the module folder. Then I went to .js file, and changed names to css target. Should that work?

[sdetweil]

@nakulbende what is in the css file?