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 :D
    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.


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.