How to get 2 modules side by side?

[BananaBro]

Hi,

i have two instances of the MMM-PublicTransportBerlin Module.

{
			module: 'MMM-PublicTransportBerlin',
			disabled : false,
			position: 'bottom_right',
			config: {
				name: 'Leopoldplatz',
				stationId: '900000009102',
				hidden: false,
				ignoredStations: [],
				//ignoredLines: ['U5', 'U8', 'S75'],               
				excludedTransportationTypes: 'bus', //suburban,subway   
				travelTimeToStation: 8,
				interval: 120000,
				departureMinutes: 15,          
				maxDepartures: 12,
				marqueeLongDirections: true,
				showColoredLineSymbols: true,  
				useColorForRealtimeInfo: true,
				showTableHeaders: true,
				showTableHeadersAsSymbols: true,
				maxUnreachableDepartures: 3,    
				maxReachableDepartures: 7,
				fadeUnreachableDepartures: true,
				fadeReachableDepartures: true,
				fadePointForReachableDepartures: 0.25,
				excludeDelayFromTimeLabel: true
			}
		},
		{
			module: 'MMM-PublicTransportBerlin',
			disabled : false,
			position: 'bottom_right',
			config: {
				name: 'Leopoldplatz',
				stationId: '900000009104',
				hidden: false,
				ignoredStations: [],
				//ignoredLines: ['U5', 'U8', 'S75'],               
				excludedTransportationTypes: 'bus', //suburban,subway   
				travelTimeToStation: 8,
				interval: 120000,
				departureMinutes: 15,          
				maxDepartures: 12,
				marqueeLongDirections: true,
				showColoredLineSymbols: true,  
				useColorForRealtimeInfo: true,
				showTableHeaders: true,
				showTableHeadersAsSymbols: true,
				maxUnreachableDepartures: 3,    
				maxReachableDepartures: 7,
				fadeUnreachableDepartures: true,
				fadeReachableDepartures: true,
				fadePointForReachableDepartures: 0.25,
				excludeDelayFromTimeLabel: true
			}
		},

As you can see I want them both in the bottom_right. For now they align horizontally vertically but I don’t have space for that. Side by side (vertically horizontally) is enough space and it would look much better.

Unfortunately I don’t have a clue how to do it. Any help appreciated.

[Alvinger]

@BananaBro just use the same region name, e.g. “bottom_right”, for both modules and they will be automatically stacked vertically.

[BananaBro]

Sry I mixed up horizontally and vertically
Of course I meant it the other way around!
My config and the rest of the text should have cleared that out though.

[j.e.f.f]

@BananaBro Try this in your custom CSS:

.MMM-PublicTransportBerlin {
  display: inline-block;
  width: 49%;
  max-width: 49%;
  min-width: 49%;
}

.MMM-PublicTransportBerlin:first-child {
  margin-right: 2%;
}

It may need a bit of tweaking to get it to work right… If it doesn’t work as-is, post a screenshot and we’ll take it from there.

[BananaBro]

@j.e.f.f thanks thats already looking very promising.

as you can see both instances of the MMM-PublicTransportBerlin module are side by side. Now it would be nice if there would be a little bit space between them.

Maybe its just coincidence but my Mirror took ages to load. Does a custom css always slow down the first startup?

[j.e.f.f]

@BananaBro to adjust the space in between, play with the percentages. The 49% value is the width of the modules, and the 2% is the space in between. Adjust them so the total adds up to 100% — in this case, 2 x 49 + 2. So if you wanted more space in between — say you increase the 2% value to 6% then you would decrease the module width from 49% to 47%. Keep adjusting until you are happy.

As for the start up time, I haven’t noticed custom.css causing abnormally long startup time, and my custom.css file has quite a lot in it. Could be something else going on.

[BananaBro]

@j.e.f.f thx for the help. i tried to play with the percentages but it breaks the layout of the module. is there a possibility to grant more space in total?

[j.e.f.f]

@BananaBro try assigning more width to the bottom_right region:

.region.bottom.right {
  width: 800px;
  min-width: 800px;
  max-width: 800px;
}

Adjust 800px until you are happy

[BananaBro]

@j.e.f.f really appreciate your help!

this is my result for now!

.region.bottom.right {
  width: 720px;
  min-width: 720px;
  max-width: 720px;
}

.MMM-PublicTransportBerlin {
  display: inline-block;
  width: 45%;
  max-width: 45%;
  min-width: 45%;
  margin-left: 5%;
}

.MMM-PublicTransportBerlin:first-child {
  margin-right: 5%;
}

And this is my custom css if anyone is interested. I had to split the margin otherwise there was no space between the two instances.