Different order in center after Upgrade to 2.32

[sdetweil]

@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

[falter]

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?

[falter]

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?

[sdetweil]

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

[sdetweil]

@falter not a bug, side effect

will examine later

[falter]

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

.region .container {
   display: block;
 }

[sdetweil]

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

[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

[falter]

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

[sdetweil]

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