I am trying the Move records Modal exactly on top of below Modal but I am not getting the styling that I need. Below is the image and I am applying styling on it.
Here is my image link
:https://drive.google.com/open?id=0BwgG2ftgvg_YUnZNRnpaWmFIZkNYbEg2WVZuLXBuZEtkNEo0
You have to set the greater z-index for container which should be in front than container on back.
Related
I'm using react, and I have an icon which is an image, the issue is that the position of it is fixed, it's showing and working normally as I want except when scrolling to another component such as carousel or cards, you can see from the pics, how can I fix this?
This is how it's shown
This what happens when user scrolls to another component
use z-index
You should give the z-index of the icon div higher than the z-index of the carousel or card div
example
`.icon{z-index:99999,position:'fixed'}`
<div class='icon'>your icon<div>
I'm trying to create an overlay that may contain its own scrollbar. The overlay should take up the full width and height of the screen, and scroll its own contents if they are longer than the page height.
My problem is I can't figure out how to stop the actual page from scrolling when the overlay scrolls. I want this to act like a Bootstrap modal.
Here is the fiddle with a code example: https://jsfiddle.net/r5jLcekb/
In the example, I'm using:
fixed bg-black bg-opacity-50 w-screen h-screen overflow-y-scroll
As you can see, the page scrolls it's contents, not just the overlay. I only want the contents within the overlay to scroll. Is this possible to do purely with tailwind?
I think you're looking for overscroll-auto -- see https://tailwindcss.com/docs/overscroll-behavior for more.
The way I approached this problem is by adding a class to the body whenever this overlay is rendered. Whenever your overlay element is mounted you need to execute a javascript code that does the following :
document.body.classList.add(`overflow-hidden`);
document.body.style.marginRight =
document.body.offsetWidth - widthBefore + "px";
The second assignment is optional and it's added to get rid of layout shift when scrollbar shows and hides
I had this same issue. My parent container was scrolling for the entire length of the site when the fullscreen overlay was active, but the content was not scrolling in the fullscreen overlay. I added overflow-y-scroll and overscroll-y-none to the fixed container and it worked nicely. Hope this saves someone some time :) Thanks Jas (comment above) for the point to overscroll.
See https://tailwindcss.com/docs/overflow
and https://tailwindcss.com/docs/overscroll-behavior
I have two components in a page, a position fixed element which covers the browser window which has a child image with transparent background, and a fullpage.js vertical slider powered by CSS transforms, with the following markup:
<body>
<div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
<div id="fullpage-container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
I'd like the fixed element to display over the first section so the image is visible, and then the second section to slide over the image so the image disappears under the section. With the above markup this isn't possible with any combination of z-indexes, and if I put the fixed element inside #fullpage-container the position fixed of .fixed-element is no longer respected due to the transform on the parent.
Is there anyway to achieve this effect that I've missed?
Doesn't sound like it is possible. Mainly because whenever you change the z-index (which will have to be on section leave or on section load by using the fullpage.js callbacks onLeave or onLoad) the image will suddenly appear or disappear:
When changing the z-index on onLeave, the image will disappear behind the 1st section while the section is moving to the destination.
When changing the z-index on afterLoad of the 2nd section, the image will be over the 2nd section for a small period of time before the 2nd section really stops moving. So you'll see how it suddenly disappears behind.
The only option I could see is:
You use the fullPage.js option scrollBar:true so you can get the current scroll position using the scroll event (or any library that do so).
Then whenever you detect the fixed image is going to hit the 2nd section, change the z-index just right before it does.
You will also be able to play with z-index even when placing the fixed element inside the wrapper. As fullPage won't be using css3 transformations anymore (although performance won't be that smooth)
I am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.
I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.
I am using bootstrap 3.3.
I think that I will have to use percentages of the screen width and then also do media queries in the CSS.
JS Fiddle
I have solved it.
The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.
I have implemented a YUI split button with a menu. The button with menu appears in a scrolling div between header and a footer divs. When exposing the menu near the footer div, the menu appears behind the div.
I have tried positioning the footer div with a z-index of -1. I have tried positioning the div (within the scrolling div) containing the button with menu using a z-index of 500. The menu always appears behind the footer div.
I am not using a YUI layout. Yet. If I did would it help?>
In addition to setting the z-index property, you also have to change the position property. The easiest thing to change it to is position:relative.
Try setting both of those properties.
I don't think YUI layout will assist you in this particular problem.
I started using YUI layout and my issues no longer exist.