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

How to get 2 modules side by side?



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



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



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


  • Module Developer

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



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

    0_1520723117961_Bildschirmfoto von »2018-03-11 00-04-18«.png

    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?


  • Module Developer

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



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


  • Module Developer

    @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



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

    0_1520793257773_Bildschirmfoto von »2018-03-11 19-33-15«.png

    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.