MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Want to display 2 modules side-by-side



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



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



  • @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…



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



  • @nakulbende what is in the css file?


Log in to reply