I've got a modal style I'm using from http://tympanus.net/codrops/ but I've created a custom close button (.md-close) that I want to be truly fixed in the top right as the user scrolls the content of the modal window.
Code here: http://codepen.io/jeremypbeasley/pen/upzrB
Right now when you scroll, .md-close leaves the visible area, making it hard to close without scrolling up. How can I force this to stay put?
I realize this is something to do with the position property but I've tried every possible combination of the parents and children. Might this have something to do with the transform property I'm using?
Any help?
Full css i used :
or live : http://codepen.io/anon/pen/lynBm
.md-close {
position: fixed;
top: 3vw;
right: 3vw;
height: 50px;
border: 0px;
cursor: pointer;
width: 50px;
background: black;
text-indent: -9999px;
overflow: hidden;
display: block;
background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
background-size: 100%;
z-index: 99999;
}
.md-trigger {
width: 300px;
height: 300px;
background: blue;
text-indent: -99999px;
margin: 100px auto;
}
.md-modal {
width: 100%;
max-width: 100000000000px;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
transform: none;
backface-visibility: visible;
}
.md-content {
max-height: 100%;
overflow: auto;
padding: 10% !important;
}
.md-show.md-effect-12 ~ .md-overlay {
background-color: black;
}
I solved this problem by adding a max-height of 100vh to .md-content
Related
I'm building a React app, and I'm having a problem with position: sticky in my story-header element. I already checked the parent styles and there's no overflow: hidden attribute-value.
HTML
<div className='StoryList' >
<div className='story-header'></div>
</div>
CSS - Stylesheet
.App {
width: 100%;
overflow: visible;
}
.StoryList {
position: relative;
margin: 0;
width: 100%;
}
.story-header {
width: 100%;
top: -20px;
height: 50px;
left: 0;
background-color: lightgray;
position: sticky;
z-index: 1;
}
Why is the story-header sliding above the top?
I'm not sure that I understood you correctly, but it works as it should. I've tried it in pure html/css and it's working. Check my code, buddy:
.App {
width: 100%;
height: 200vh;
overflow: visible;
}
.StoryList {
background: #000;
height: 40vh;
position: fixed; // you can comment it out, I'm not sure what would you like to have
margin: 0;
width: 100%;
}
.story-header {
width: 100%;
top: -20px;
height: 50px;
left: 0;
background-color: lightgray;
position: sticky;
z-index: 1;
}
Check both versions - with fixed position and without it.
well i am also having the same problem turns out i need to set the height of the app and root to inherit, trying doing it and it should work then
It is may be very strange, but in my case the deleting of the font-size: 100%; and the font-size: inherit; in the zero-styles helped me to solve the issue!
I have a fixed menu at the top with a z-index of 999 (to stop anything appearing in front of it in theory). I also have a div that is designed to scroll horizontally. Why are the overflow properties on the scrolling div making it appear on top of the menu bar?
Scrolling div CSS:
.product-viewer {
width: 85%;
margin-left: 15%;
display: inline-block;
border-top-left-radius: 30px;
border-top-left-radius: 3vmax;
border-bottom-left-radius: 30px;
border-bottom-left-radius: 3vmax;
height: 300px;
height: 30vmax;
background-color: #202020;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
z-index: 0;
}
Menu bar CSS (#menu.fix is when the menu is fixed as it is a "sticky" menu):
#menu {
width: 100%;
height: 50px;
height: 5vmax;
background-color: rgba(0, 0, 0, 0.8);
background-blend-mode: hard-light;
text-align: center;
overflow: hidden;
line-height: 50px;
line-height: 5vmax;
display: inline-block;
}
#menu.fix {
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
Link to site: https://www.inquaress.com/ranges/beach
Your .cover-image element has z-index: 0 !important; and that makes it flow under the following element. You should check your markup as your menu is a child element of .cover-image and your following element .section.no-select doesn't have z-index definitions thus interpreted by the browser to go over the previous element.
Your fix would be just to change your z-index something like
.cover-image {
height: 600px;
height: calc(100vh - 15vmax);
max-height: 75vh;
z-index: 1 !important;
}
Opening a modal on my site is causing a double scroll bar (both vertical) issue. The modal uses position: fixed and overflow: auto. I know it is overflow: auto causing the issue, but I need this style, as my modal contains a lot of content which in most cases could not fit in the users viewport, therefore scrolling the content is a requirement.
.enquire-nav {
font-family: inherit;
top: 0;
left: 0;
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(36, 32, 33, .97);
}
Thanks in advance :]
In the end I found that the best solution was to toggle a class on the body when the modal is opened, this class would add overflow-y: hidden. This allows me to scroll the content of the modal if it overflows the body, but doesn't allow scrolling of the body itself at the same time. No more double scroll bars.
The jQuery:
$(".menu-trigger, .primary-nav-item, .hamburger-one").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
$('body').toggleClass("no-scroll");
});
The CSS:
.no-scroll {
overflow-y: hidden;
}
So I've solved this issue before while building out my own jQuery modal plugin. Here's a link to the github repo, for reference: https://github.com/thecox/bw-box. I'll dig around and find some of the relevant styling that resolved the issue. Here's the main structure:
HTML
<div id="default-modal" class="bwbox__modal">
<div class="bwbox__modal__outer">
<div class="bwbox__modal__middle">
<div class="bwbox__modal__inner">
CLOSE X
<div class="bwbox__modal__inner__content">
<!-- Content Goes Here -->
</div>
</div>
</div>
</div>
</div>
CSS
.bwbox__modal {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .8);
overflow-y: scroll;
z-index: 9999;
}
.bwbox__modal__outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.bwbox__modal__middle {
position: relative;
display: table-cell;
vertical-align: middle;
}
.bwbox__modal__inner {
position: relative;
background: #fff;
font-size: 1em;
font-weight: 300;
text-align: left;
color: #555;
width: 90%;
max-width: 885px;
z-index: 9999;
padding: 2em 2% 1em;
margin: 30px auto;
.bwbox__modal__inner__content {
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
}
.bwbox__modal__inner__close {
position: absolute;
color: #555;
top: 10px;
right: 20px;
font-size: .9em;
text-decoration: none;
}
Basically, the outer, middle, and inner containers center the container vertically and horizontally in the frame in such a way that if they expand beyond the window height, you can still scroll. Maybe pull it down and check out the demo.Let me know if you have any questions.
In Angular, similar to Leon Burman's answer:
setBodyModalHidden(isHidden: boolean) {
document.getElementsByTagName('body').item(0).style.overflowY = isHidden ? 'hidden' : '';
}
I want to zoom the picture on hover.
So, it works so far but the end result isn't what I want.
When the picture zooms, it stops on the left side of the containing div and enlarges to the right side.
I already found the direction property but with that I can only switch the side behaviors. Something like direction: all would propably work, but it doesn't exist.
What I expect:
What I get:
See the JSFiddle
I recommend pure CSS without any JavaScript and jQuery code.
Here is one way of doing it:
#container {
margin: 0 auto;
width: 800px;
height: 400px;
/*overflow: hidden;*/
position: relative;
border: 1px solid red;
}
#container img {
position: absolute;
margin: auto;
top: 0px;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
/*transition: all 0.5s ease;*/
}
#container img:hover {
left: -5%;
width: 110%;
height: 110%;
}
Add left: -5% to you CSS rule for img:hover.
See demo at: http://jsfiddle.net/audetwebdesign/Em7yu/
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%