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

                      @falter I can’t help more, can’t use module here, no cameras.

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @sdetweil thanks anyway, at least I found out about the change in main.css, so I can keep using the recent version, which was most important. I just have to apply this change after future updates, which I can live with.

                        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