MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Different order in center after Upgrade to 2.32

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    21 Posts 2 Posters 1.0k Views 2 Watching
    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.
    • S Offline
      sdetweil @sdetweil
      last edited by

      another thing is to open the developer window elements tab, and capture the html so we can look at it.

      see the second link in my signature below

      once you located the html content for the module,
      tight click and copy

      then paste somewhere, send to me, same userid at gmail

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      F 1 Reply Last reply Reply Quote 0
      • F Offline
        falter @sdetweil
        last edited by

        @sdetweil thank you very much for taking the time!
        For the logs, do I have to change the loglevel? There is not much in mm-out.log, or where do I have to look?

        Here is the content of the container from dev-window:

        <div class="container"><div id="module_0_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;"><header class="module-header" style="display: none;">undefined</header><div class="module-content"><video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video></div></div><div id="module_1_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;"><header class="module-header" style="display: none;">undefined</header><div class="module-content"><video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video></div></div><div id="module_2_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;"><header class="module-header" style="display: block;">Nordseite</header><div class="module-content"><video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video></div></div><div id="module_3_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;"><header class="module-header" style="display: block;">Terrasse</header><div class="module-content"><video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video></div></div><div id="module_4_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;"><header class="module-header" style="display: block;">Garten</header><div class="module-content"><video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video></div></div><div id="module_5_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;"><header class="module-header" style="display: block;">Südseite</header><div class="module-content"><video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video></div></div></div>
        
        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @falter
          last edited by

          @falter out.log was where

          here is formatted html

          <div class="container">
             <div id="module_0_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;">
                <header class="module-header" style="display: none;">undefined</header>
                <div class="module-content">
                   <video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video>
                </div>
             </div>
             <div id="module_1_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;">
                <header class="module-header" style="display: none;">undefined</header>
                <div class="module-content">
                   <video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video>
                </div>
             </div>
             <div id="module_2_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;">
                <header class="module-header" style="display: block;">Nordseite</header>
                <div class="module-content">
                   <video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video>
                </div>
             </div>
             <div id="module_3_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;">
                <header class="module-header" style="display: block;">Terrasse</header>
                <div class="module-content">
                   <video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video>
                </div>
             </div>
             <div id="module_4_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;">
                <header class="module-header" style="display: block;">Garten</header>
                <div class="module-content">
                   <video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video>
                </div>
             </div>
             <div id="module_5_MMM-RTSPtoWeb" class="module MMM-RTSPtoWeb MMM-RTSPtoWeb" style="order: 0;">
                <header class="module-header" style="display: block;">Südseite</header>
                <div class="module-content">
                   <video class="rtw-video" autoplay="" playsinline="" style="max-width: 100%;"></video>
                </div>
             </div>
          </div>
          

          so you have 6 instances of module, which will be stacked vertically by default.

          I see some change was made to container, now in main.css where is wasn’t before…
          I think this is a side effect to the “order” config option…

          I don’t know how to fix it at the moment… I am busy most of the day

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • F Offline
            falter
            last edited by

            ok, what do you mean with change now in main.css, container and order config? Was it me? I have this running for years and it could be, some time ago, I script-kiddie’d something in main.css, but I think this would be overwritten by the update?
            Any hint where I could look?

            S 1 Reply Last reply Reply Quote 0
            • F Offline
              falter
              last edited by

              just to let you know, I got it, now I copied the old main.css over the recent one and it’s working as before.
              Diff says:

              242,254d241
              < 
              < /**
              <  * Container Definitions.
              <  */
              < 
              < .region .container {
              <   display: flex;
              <   flex-direction: column;
              < }
              < 
              < .region .container.hidden {
              <   display: none;
              < }
              
              

              so, this is a bug then?

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

                @falter not you

                if you look in main.css

                container is defined

                it was not in prior release
                so i think it defaulted to

                display:block;
                

                now its defined as

                display:flex;
                flex-direction:column;
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

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

                  @falter not a bug, side effect

                  will examine later

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • F Offline
                    falter
                    last edited by

                    is there anything I could put in custom.css for future updates?
                    This does not work:

                    .region .container {
                       display: block;
                     }
                    
                    S 2 Replies Last reply Reply Quote 0
                    • S Offline
                      sdetweil @falter
                      last edited by

                      @falter I dont know yet. Haven’t had a chance to debug

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 1
                      • S Offline
                        sdetweil @falter
                        last edited by sdetweil

                        @falter in my 2.31 I wanted rows in top left
                        so I did this in custom.css

                        .region.bar.top.left {
                            display: inline-flex !important;
                            flex-direction: row;
                        }
                        

                        it still works in 2.32

                        but this gives A row.

                        I think you need display: grid;

                        I think this will do it, this gives evenly spaced 3x2 grid
                        for the top center position only

                        .region.top.center .container {
                                display: grid;
                                grid-template-columns: repeat(3,1fr);
                                grid-template-rows: repeat(2,1fr);
                                gap:10px;
                        }
                        

                        using the top left (my modules) using the developers window you can see the space of the grid
                        Screenshot at 2025-07-05 09-47-53.png

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        F 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 2 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy