MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    UNSOLVED Two modules side by side

    Troubleshooting
    4
    14
    278
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      MMuser last edited by

      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.

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @MMuser last edited by

        @mmuser you will have to use CSS for that

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • M
          MMuser last edited by

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

          1 Reply Last reply Reply Quote 0
          • hango
            hango Module Developer last edited by 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 */
            }
            

            https://github.com/hangorazvan

            1 Reply Last reply Reply Quote 0
            • M
              MMuser last edited by

              @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 mumblebaj 2 Replies Last reply Reply Quote 0
              • hango
                hango Module Developer @MMuser last edited by

                @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: {
                
                	}
                },
                

                https://github.com/hangorazvan

                1 Reply Last reply Reply Quote 1
                • mumblebaj
                  mumblebaj Project Sponsor @MMuser last edited by 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

                  3bfbebff-9d7d-4165-83b0-1f4da6ec27ab-image.png

                  hango 1 Reply Last reply Reply Quote 1
                  • hango
                    hango Module Developer @mumblebaj last edited by hango

                    @mumblebaj same thing with classes, even better! if you change the module position the ID is change, I know what I’m talking about.

                    https://github.com/hangorazvan

                    mumblebaj 1 Reply Last reply Reply Quote 0
                    • mumblebaj
                      mumblebaj Project Sponsor @hango last edited by

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

                      hango 1 Reply Last reply Reply Quote 0
                      • hango
                        hango Module Developer @mumblebaj last edited by

                        @mumblebaj most of users don’t know how to use developer window, with css just copy an 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.

                        https://github.com/hangorazvan

                        S mumblebaj 2 Replies Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy