MMM-Carousel and modules that are currently generating an empty div

sdetweil

i think you can do
in custom.css

.MMM-CanadianPublicWeatherAlerts div:empty {
    display:none;
}

redfishbluefish

@sdetweil that definitely works for the <div> created by the module for when it generates content but not for the surrounding <div> that I’m pretty sure are the standard one generated by any module:

<div id="module_9_MMM-CanadianPublicWeatherAlerts" class="module MMM-CanadianPublicWeatherAlerts hidden" style="transition: opacity; opacity: 0; position: fixed;">
  <header class="module-header" style="display: none;">undefined</header>
    <div class="module-content">
      <div>
        <div></div> <--- This gets display:none applied to it.
      </div>
    </div>
  </div>
</div>

To make MMM-Carousel happy I think I need the top level <div> to not be generated but I’m realizing that implies I would need to modify MMM-CanadianPublicWeatherAlerts to dynamically unregister and register as a module and I don’t see how that can be done.

What might be easier is if I can figure out how to dynamically update the MMM-Carousel settings read from my config.js:

module: 'MMM-Carousel',
position: 'bottom_bar',
config: {
 transitionInterval: 10000,
 ignoreModules: [],
 mode: 'positional',
 top_right: {enabled: true, ignoreModules: ['currentweather']},
 top_center: {enabled: true, ignoreModules: ['updatenotification']}
}

I would need to add/remove MMM-CanadianPublicWeatherAlerts from the ignoreModules list for top_center depending on if it wants to generate content or not. No output - add to the ignoredModules list and MMM-Carousel ignores it for the rotation. Output - remove from the ignoredModules list and now it gets rotated with the rest.

sdetweil

@redfishbluefish magicmirror can only show or hide content
when a module is hidden that tree is display:none;

that content should take no space

carousel/pages/… etc have no idea what is in the module div
they just hide it or show it

mumblebaj

@sdetweil and @redfishbluefish When I had the same issue with my MMM-NewsAPI module where if a user opted not to show a QR Code, it would create an empty div which took up space. I had to implement the following in code to dynamically remove the div for it if the option is not selected. You would need to have similar logic for if no alert results are returned you remove all traces of the parent div.

else {
                const qrCodeElement = document.getElementById("NEWSAPI_QRCODE")
                if (qrCodeElement) {
                    qrCodeElement.parentNode.removeChild(qrCodeElement)
                }
            }

This is how I have implemented it in my module, may not be the most elegant but works for me and the QR div no longer takes up the space if the user did not opt to show it.

sdetweil

@mumblebaj but that is effectively what display:none does