Stacking issues with navbar dropdown + slider

alexander-bruun commented 3 months ago

Hello :)

Thanks for the awesome library.

I am experience odd bahavior with index stacking in regards to absolute positioned navbar dropdowns in conjunction with a slider right below it. No matter what I try and do the navbar dropdown disappears behind the slider, as well as other component types.

Code to reproduce the issue:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Franken UI</title>
    <link rel="preconnect" href="https://rsms.me/" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

    <style>
      :root {
        font-family: Inter, sans-serif;
        font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
      }
      @supports (font-variation-settings: normal) {
        :root {
          font-family: InterVariable, sans-serif;
        }
      }
    </style>

    <link
      rel="stylesheet"
      href="https://unpkg.com/franken-wc@0.0.2/dist/css/slate.min.css"
    />

    <script>
      if (
        localStorage.getItem("color-theme") === "dark" ||
        (!("color-theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit-icons.min.js"></script>
    <script
      type="module"
      src="https://unpkg.com/franken-wc@0.0.2/dist/js/wc.iife.js"
    ></script>
  </head>
  <body class="bg-background text-foreground">
    <nav class="uk-navbar-container">
      <div class="uk-container">
        <div uk-navbar>
          <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                  <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                  </ul>
                </div>
              </li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>

          <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                  <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                  </ul>
                </div>
              </li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <br/>
    <br/>
    <div class="uk-position-relative uk-visible-toggle mt-2" tabindex="-1" uk-slider>
      <div
        class="uk-child-width-1-3@s uk-child-width-1-4@m uk-slider-items uk-child-width-1-2"
      >
        <div>
          <img src="https://franken-ui.dev/images/slider1.jpg" width="400" height="600" alt="" />
          <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </div>
        <div>
          <img src="https://franken-ui.dev/images/slider2.jpg" width="400" height="600" alt="" />
          <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </div>
        <div>
          <img src="https://franken-ui.dev/images/slider3.jpg" width="400" height="600" alt="" />
          <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </div>
        <div>
          <img src="https://franken-ui.dev/images/slider4.jpg" width="400" height="600" alt="" />
          <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </div>
        <div>
          <img src="https://franken-ui.dev/images/slider5.jpg" width="400" height="600" alt="" />
          <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </div>
        <div>
          <img src="https://franken-ui.dev/images/slider6.jpg" width="400" height="600" alt="" />
          <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </div>
      </div>
    </div>

    <!-- END -->
    <script>
      var themeToggleBtn = document.getElementById("theme-toggle");

      themeToggleBtn?.addEventListener("click", function () {
        // if set via local storage previously
        if (localStorage.getItem("color-theme")) {
          if (localStorage.getItem("color-theme") === "light") {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
          } else {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
          }

          // if NOT set via local storage previously
        } else {
          if (document.documentElement.classList.contains("dark")) {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
          } else {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
          }
        }
      });
    </script>
  </body>
</html>

I have a gut feeling this is a UiKit issue, and has nothing to do with franken-ui, but thought I would bring it up since it has been grinding my brain for a little bit.

sveltecult commented 3 months ago

You can try adding position relative to your navbar.

Let me know if it fixes yours.

alexander-bruun commented 3 months ago

I honestly thought I already had tried that, but it did the job. Absolute legend!

franken-ui / ui

Stacking issues with navbar dropdown + slider #14