Hello I have some issues with a code. I'm trying to do the following. When OPEN POPUP is clicked this will make popup visible and it will cover the whole screen. When X in content is clicked this will close the content and make it will make popup invisible again.
I have achieved this using :target pseudo-class.
You can see the demo here: https://codepen.io/loganlee/pen/Jjdjzom?editors=1100
I have two problems. First, OPEN POPUP link is visible on top of screen and it is not covered by .popup. Even though I've done width: 100vw and height: 100vh.
.popup
{
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(black, .8);
opacity: 0;
visibility: hidden;
padding: 10rem 0;
}
Second, .popup__content is taller than .popup when height of screen is made really small. You can see both in the picture.
I think I've done something wrong with layout. Thanks.
Add these style to your code.. for your two issues.
.popup {
top: 0px;
left: 0px;
overflow-y: auto;
}
Related
Here's an example of what is happening: https://jsfiddle.net/fz5asxn6/
If you hit 'Click Me' and the Add button a few times you can see items added but the bottom ones are being cutoff and I can't see the bottom of the scrollbar.
I've tried setting the overflow property, flex-flow, and table.
Is there any way to see have the options-body take up the whole options inside the sidebar without cutting anything off?
Whoa, that confused me. I saw your bug and when I opened the dev tools it was gone. It took me a while to realize your media query was changing things based on the height. But that showed me the bug immediately.
Your sidebar has a height: 100%; and a margin-top: 60px;.
Try setting margin-top:0; then you see that this causes the issue.
I suggest setting height: calc(100% - 60px);
And in your media query height: calc(100% - 15px);
That should fix your problem.
You only need to add box-sizing: border-box; to your .sidebar
This will tell the browser to calculate the total height from the border, not the content, and thus the 100% height would include the padding.
So your css for .sidebar would become:
.sidebar {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
box-sizing: border-box;
}
Updated Jsfiddle: https://jsfiddle.net/nabtron/Lznrfcyv/1/
I hope it helps.
Please see the following page:
https://dogcollars-3.myshopify.com/products/short-sleeve-t-shirt
I am trying to fix the position of the "order details" box so it stay at prominent position and content behind it scroll. This is a Shopify prebuilt theme. I have applied the following additional CSS:
#media only screen and (min-width: 1000px) {
.product-single {
width: 70%;
height: auto;
position: relative;
}
.order-details {
width: 300px;
height: auto;
padding: 10px;
top: 50px;
left: 70%;
background: rgba(255,255,0,0.2);
position: fixed;
}
}
The 'order details' element is positioned correctly but not fixed. This element scrolls along with the content behind this layer.
Problem is with transform: translate3d styles on element .page-container.
Commenting these styles the problem goes away, 'Others detail' element would be fixed. You can try to comment/uncommend in the fiddle below.
https://jsfiddle.net/nLbntzqk/
EDIT: Now I've found more info, see 'transform3d' not working with position: fixed children for more detail explanation.
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.
I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use Trello then you know what I'm going for.
Is this possible without using JavaScript to control the scrollbar?
Here is the CSS I have applied to my modal and dialog so far:
body.blocked {
overflow: hidden;
}
.modal-screen {
background: #717174;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.9;
z-index: 50;
}
.dialog {
background: #fff;
position: fixed;
padding: 12px;
top: 20%;
left: 50%;
z-index: 10000;
border-radius: 5px;
box-shadow: 0, 0, 8px, #111;
}
Try:
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
It will arrange your modal and then give it an vertical scroll
This is what fixed it for me:
max-height: 100%;
overflow-y: auto;
EDIT: I now use the same method currently used on Twitter where the modal acts sort of like a separate page on top of the current content and the content behind the modal does not move as you scroll.
In essence it is this:
var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
marginRight: scrollBarWidth,
overflow: 'hidden'
});
$modal.show();
With this CSS on the modal:
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS version (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/
This works no matter the height or width of the page or modal dialog, allows scrolling no matter where your mouse/finger is, doesn't have the jarring jump some solutions have that disable scroll on the main content, and looks great too.
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
Here is my demo of modal window that auto-resize to its content and starts scrolling when it does not fit the window.
Modal window demo (see comments in the HTML source code)
All done only with HTML and CSS - no JS required to display and resize the modal window (but you still need it to display the window of course - in new version you don't need JS at all).
Update (more demos):
Modal window aligned to top
Centered Modal window
Old demo that use Javascript
The point is to have outer and inner DIVs where the outer one defines the fixed position and the inner creates the scrolling. (In the demo there are actually more DIVs to make them look like an actual modal window.)
#modal {
position: fixed;
transform: translate(0,0);
width: auto; left: 0; right: 0;
height: auto; top: 0; bottom: 0;
z-index: 990; /* display above everything else */
padding: 20px; /* create padding for inner window - page under modal window will be still visible */
}
#modal .outer {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
z-index: 999;
}
#modal .inner {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
width: 100%;
height: auto; /* allow to fit content (if smaller)... */
max-height: 100%; /* ... but make sure it does not overflow browser window */
/* allow vertical scrolling if required */
overflow-x: hidden;
overflow-y: auto;
/* definition of modal window layout */
background: #ffffff;
border: 2px solid #222222;
border-radius: 16px; /* some nice (modern) round corners */
padding: 16px; /* make sure inner elements does not overflow round corners */
}
simple way you can do this by adding this css
So, you just added this to CSS:
.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}
and it's working!
fixed positioning alone should have fixed that problem but another good workaround to avoid this issue is to place your modal divs or elements at the bottom of the page not within your sites layout. Most modal plugins give their modal positioning absolute to allow the user keep main page scrolling.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
position:fixed implies that, well, the modal window will remain fixed relative to the viewpoint. I agree with your assessment that it's appropriate in this scenario, with that in mind why don'y you add a scrollbar to the modal window itself?
If so, correct max-height and overflow properties should do the trick.
In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page.
Once I did that, the problems I encountered when applying position: absolute to the dialog were resolved as the user could no longer scroll down the page.
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
I wanted to add my pure CSS answer to this problem of modals with dynamic width and height. The following code also works with the following requirements:
Place modal in center of screen
If modal is higher than viewport, scroll dimmer (not modal content)
HTML:
<div class="modal">
<div class="modal__content">
(Long) Content
</div>
</div>
CSS/LESS:
.modal {
position: fixed;
display: flex;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: #qquad;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
z-index: #zindex-modal;
&__content {
width: 900px;
margin: auto;
max-width: 90%;
padding: #quad;
background: white;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
}
This way the modal is always within the viewport. The width and height of the modal are as flexible as you like. I removed my close icon from this for simplicity.