All Questions
73 questions
0
votes
1
answer
29
views
Custom Carousel Z-Index issue - Active Slide in Front of Background Box
I am building a React-based carousel component where:
The active slide should be in front of a red background box.
The inactive slides (i.e., all other images in the carousel) should stay
behind the ...
0
votes
1
answer
60
views
How to make Header and Sidebars sticky in a layout while scrolling text appears below them?
I am building a React application where I have multiple components like Header, LeftSidebar, RightSidebar, and Home. I am using a Layout component to wrap these components (e.g., LeftSidebar and ...
2
votes
1
answer
1k
views
React dnd-kit z-index
I created a drag-and-drop application using React and dnd-kit. I have a main grid (calendar) which contains many cells which are all droppable components.
I also have some other containers (also ...
0
votes
0
answers
13
views
Stacking context with nested mapping in Typescript React using Framer Motion
I have an array of skill objects, some of which have an array of subskills. I'm using nested mapping to render them as cards, flexbox to lay them out, and Framer Motion to staggered-ly animate them on ...
0
votes
0
answers
15
views
Problem in positioning elements relative to their parent container
import React from "react";
import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
...
0
votes
1
answer
217
views
Tailwind dropdown menu items don't popout from react nextjs card component
I have a dropdown menu component (DropdownWithSearch), but when I click it, it does not popout, but instead opens inside the card component(in UserAssignForm), where it is positioned.
...
0
votes
1
answer
74
views
custom dropdown menu appearing below other elements on form
I have a form where a custom dropdown component that I built dynamically appears after a user has selected an option in another dropdown menu (which is the same component being reused), but the menu ...
0
votes
1
answer
85
views
Nav Bar Z-index won't work with the Alice Carousel
I have my tailwind store navigation bar and alice carousel for slide change, but the dropdown nav bar of the desktop view won't appear over the alice carousel, it appear under the alice carousel.
I ...
0
votes
1
answer
77
views
Need the parent div above the children, React and tailwind,
This motion div is a sidebar, and the menu items is a category, the category open another sidebar nested the first, but the second sidebar is above the parent, help.
<AnimatePresence mode="...
0
votes
1
answer
80
views
Parent-child z-index issues (inside a container)
I am having problems with my child not appearing over my parent even though it has a higher z-index than the parent. Both images appear in Inspect > Elements so I'm sure its not that problem. The ...
0
votes
1
answer
659
views
Z-Index stacking issue in React/tailwind application
I am having an issue with z-index stacking on an app I'm building. The code is displayed below. It is a react application using tailwind.css.
For the app I have a hamburger menu in the header that ...
0
votes
1
answer
194
views
Drawer (Mobile view) only opens to the height of the Navbar and does not cover the full page
I have a Header and Footer (High order component) that has all the other pages in between these components; a layout to be precise. For mobile view, I have created a drawer that opens by clicking on ...
10
votes
2
answers
2k
views
Bring draggable div to the front in React.js when user clicks on it
I want to bring a draggable box to the front when I click on it or drag it.
I don't know in advance the maximum number of such boxes because I have a button that creates a new draggable box when the ...
0
votes
1
answer
837
views
How can I close a modal and its dropdow in one click MUI
I want to know if it's possible to close both a modal that I open after click and its dropdown menu in one click.
I have the screenshot below and the link to a sandbox here :
https://codesandbox.io/s/...
2
votes
1
answer
1k
views
Tailwind css and Next.js nav component z-index not working
I am currently working on a Next.js project with Tailwind.css.
I have a header component called nav, with the following styling:
<div className="sticky top-0 z-100 body bg-white flex flex-row ...