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.

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

    Scheduled Pinned Locked Moved Solved Troubleshooting
    6 Posts 3 Posters 258 Views 3 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.
    • R Offline
      redfishbluefish
      last edited by

      Hi!

      I have a nicely working setup with MMM-Carousel and recently discovered MMM-CanadianPublicWeatherAlerts. This modules was rather handy in the last few days when there have been weather alerts.

      Now the part I’d like to “fix”. MMM-CanadianPublicWeatherAlerts generates an empty <div> when there are no weather alerts. Unfortunately, this causes MMM-Carousel to still include the empty module output as it cycles through the set of modules in that area (top_center in my case). I know this is likely a limitation of MMM-Carousel.

      What is the “correct” way to prevent MMM-CanadianPublicWeatherAlerts from generating the empty <div>?

      I had thought I could just muck with getDom() in the module to return nothing, but that doesn’t seem to work. Other thought was to see if there’s a way to dynamically move the generated <div> to some where other than top_center but that’s currently beyond my understanding.

      Thoughts?

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

        @redfishbluefish

        i think you can do
        in custom.css

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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        R 1 Reply Last reply Reply Quote 0
        • R Offline
          redfishbluefish @sdetweil
          last edited by

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

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

            @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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            mumblebajM 1 Reply Last reply Reply Quote 0
            • R redfishbluefish has marked this topic as solved on
            • mumblebajM Offline
              mumblebaj Module Developer @sdetweil
              last edited by

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

              Check out my modules at: https://github.com/mumblebaj?tab=repositories

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

                @mumblebaj but that is effectively what display:none does

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • 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