• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 248 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.
  • S Offline
    sdetweil @redfishbluefish
    last edited by sdetweil May 18, 2025, 6:40 PM May 18, 2025, 6:21 PM

    @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 May 18, 2025, 7:54 PM Reply Quote 0
    • R Offline
      redfishbluefish @sdetweil
      last edited by May 18, 2025, 7:54 PM

      @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 May 18, 2025, 8:01 PM Reply Quote 0
      • S Offline
        sdetweil @redfishbluefish
        last edited by May 18, 2025, 8:01 PM

        @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

        M 1 Reply Last reply May 19, 2025, 3:33 PM Reply Quote 0
        • R redfishbluefish has marked this topic as solved on May 18, 2025, 11:35 PM
        • M Offline
          mumblebaj Module Developer @sdetweil
          last edited by May 19, 2025, 3:33 PM

          @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 30 days ago Reply Quote 0
          • S Offline
            sdetweil @mumblebaj
            last edited by 30 days ago

            @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
            1 / 1
            • First post
              6/6
              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