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.
<!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/[email protected]/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/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<script
type="module"
src="https://unpkg.com/[email protected]/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.