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.
    • 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
                      • F Offline
                        falter @sdetweil
                        last edited by

                        @sdetweil said in Different order in center after Upgrade to 2.32:

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

                        Thanks for the effort, unfortunatly this does not change anything visible.
                        The Video-Module uses this css, if that helps. I just added the fist width (else the video is too big for 2 coloumns, and changed the second one, so I have a little gap between them:

                        .MMM-RTSPtoWeb {
                          width: 38%;
                          display: inline-block;
                        }
                        
                        .region .rtw-video {
                          width: 98%;
                          display: block;
                        }
                        
                        .rtw-error {}
                        
                        

                        If I leave the css of the module untouched and put the above in custom.css, is does not apply. But that’s another story; as I said don’t know css, or better, understand…

                        S 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