I want to make an absolutely positioned element (an icon) to float inside an Antd Drawer title but it gets cut beyond the modal.
I have tried to give it infinite z-index in the div and in the Drawer prop but without success.
I am attaching a codesanbox so that I can explain my point and you can play around.
What am I missing?
Codesandbox example
Is this what you want to achieve?
If yes, just give a position: relative to the parent container :)
z-index will not work until and unless the position of that element is set. You are giving the z-index but not giving the position to the drawer. Please give position: relative; to the Drawer
Alright, I found it!
In the end it was simpler than other approaches that I tried...
It is always tricky when you have to play with a new library. Anyway I updated the codesandbox so you can see it working!
Here is the magic:
.ant-drawer-open .ant-drawer-content-wrapper {
overflow: visible;
}
.ant-drawer-open .ant-drawer-content {
overflow: visible;
}
Related
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
You can check what is going on in www.dynamicpoa.com
Just scroll and you'll see that everything is working properly, except the SVG animation (Lottie) that is going over the header. In both pages ("/" and "/cursos").
Anyone have a hint on how to fix it?
I've tried changing header position to 'fixed' and 'sticky' but nothing seems to work. I've tried to change the properties of the div that holds the animation aswell.
Appreciate your time.
Thank you very much.
You only need to set a z-index for your header or .sticky class, like this:
.sticky{
position: sticky;
z-index: 10;
}
Add z-index:10 to header container: element class:
sticky top-0 bg-white shadow
Add z-index:1 to animation container: element class:
width:500px;height:500px;overflow:hidden;margin:0 auto;z-index: 1;outline:none; z1
I am trying to implement a component with absolute position, zIndex > 0 to make it render above other components. I am setting position: absolute. The problem is that if the component is close to the bottom of the screen, it gets cropped. I don't want to make it push the components below it. I want it to be above. The snack is here:
enter link description here
I also tried with ScrollView but the result was even worse, nothing was being displayed anymore if I set overflow:'visible' to the scrollview. Any ideas how I could get this working ?
please remove all overflow: 'visible' style.
I found many questions about this issue and i tried all of the solution i found (z-index to parent, relative position to parent, the corner plugin etc...), but nothing seems to help. Here is the demo:
http://visztpeter.me/Develop/index.html
Works in all browser, except IE7. Any idea?
Ok, i found a solution:
aside nav li{
z-index:1;
}
aside nav li.sfHover {
z-index:2;
}
So basicly i just need to add more z-index to the list element that has dropdown menu inside.
Hi I've finally got Suckerfish working and styled but in IE7 it is hidden behind the divs below it. See the dropdown on the 'Your Video/Pics' button here.
I know usually a z-index would solve the issue but in this case it seems not. Can anyone help?
Don't worry this site is not supposed to work in IE6 ;)
Try adding:
#header {
position: relative;
z-index: 1;
}
For IE, the entire block has to have a higher z-index than the block below it.