Two modules side by side

MMuser

Hello, i’d like to position two modules side by side. When i specific same position (for example bottom-left) for two modules, second one is positioned under first one. is it possible to position second module on the right of first one, not using new position bottom-center.

sdetweil

@mmuser you will have to use CSS for that

MMuser

@sdetweil any suggestion ? i have no experience with css, i was able to change text size and alignment and this is max what i am capable of.

hango

You need to set position of the modules in custom.css

.first_module {           /* your first module name */
   position: relative;    /* or absolute if you know where to put */
   top: 0px;
   height: 100px;         /* determine the height of the module */
   width: 300px;          /* determine the width of the module */
}

.second_module {           /* your second module name */
   position: relative;     /* or absolute if you know where to put */
   top: -130px;            /* is the height of first module plus module gap */
   left: 310px;            /* to put module side by side with first plus 10px gap */
   height: 100px;          /* determine the height of the module */
   width: 300px;           /* determine the width of the module */
}

MMuser

@hango thank you so much for reply, this is working very good with two different modules, issue is that i have same module in config.js more then once ( reason is that module can show info only from one bus stop and i want more), is it possible to identify instances (something like .first_module_1, .first_module_2) of one module and apply your advice ?

hango

@mmuser yes, in your config.js put diferent classes for each instance of the module

{
	module: "your module name",
	position: "top_left",
	classes: "first_module",     // same class as in custom.css
	config: {

	}
},
{
	module: "your module name",
	position: "top_left",
	classes: "second_module",    // same class as in custom.css
	config: {

	}
},

mumblebaj

@mmuser I would suggest that you grab the module_id from the Developer Window|Elements Tab. then use the div id for the module and assign the CSS as per @hango using the div id. If I had 2 instances of MMM-SweepClock in my config it would be assigned module_0_MMM-SweepClock and module_1_MMM-SweepClock

hango

@mumblebaj same thing with classes, even better! if you change the module position the ID is change.

mumblebaj

@hango Yeah, got you. Just thought it easier to get the div id rather than adding a class to config.

hango

@mumblebaj most of users don’t know how to use developer window, with css just copy and paste in custom.css, if someone needs help don’t put him right now to learn the code or what else, as I’ve seen so many so-called developers that advise the majority, this is not help.

UNSOLVED Two modules side by side