I tried this:
<div id="fixed-navigation">...<div>
<div id="content">...<div>
and the CSS:
#fixed-navigation {
position: fixed;
width: auto;
height: 100%;
background: red;
overflow-y: scroll;
}
#content {
background: yellow;
}
See: http://codepen.io/zssz/pen/LGEJOJ
But this hides part of the content div below the fixed div, and setting an arbitrary margin-left or something on #content would just ignore the variable auto width on #fixed-navigation.
So what's the right CSS way to accomplish this seemingly simple use case? (I do want the fixed navigation to be fixed, that is it must always stay on the left side while scrolling through the content)
EDIT: Oh sorry, and I forgot to mention it should work in the majority of actual browsers out there including IE9, so alas not flexbox to the rescue.
Here's a flex box implementation:
http://codepen.io/achisholm/pen/OMPBmp
The essential stuff is...
html, body {
height: 100%;
}
display: flex on the container, in this case body, then...
#fixed-navigation {
flex: 0 0 150px;
height: 100%;
overflow-y: scroll;
}
#content {
flex: 1 0 auto;
height: 100%;
overflow-y: scroll;
}
I'm doing "Scroll JQuery Mobile Panel Separately From Content" ,what I have done
I apply this css to Achieve what I do but the problem is
overflow-y : scroll ==> Always show even its content not overflow.
Do you have any idea about it, Thank in advance.
.ui-panel-inner {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Try using overflow: auto instead. That will only show scrollbars when the content overflows the normal height, whereas overflow: scroll will show them all the time.
overflow-y : scroll always display scroll bars, use auto instead.
.fixed-panel {
min-height: 280px;
max-height: 280px;
overflow-y: auto;
}
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.
I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with
bottom: 0px
position: fixed
but using
margin: auto auto 0px auto or margin-left: auto
doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!
display: flex now makes this very easy! See below:
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.content {
background: grey;
}
<div class="footer">
<div class="content">My bottom-fixed content</div>
</div>
With this solution, there is no need to set a fixed width which can be more flexible.
You can use a left property of 50% and a negative left margin equal to half the width of the footer.
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
To center an element you need to specify width and set left and right margins to auto.
Then to stick such an element to the bottom of the page you need to wrap it in another element which has fixed width, say 100% and is positioned on the bottom. And yes, css you can.
<section style="position: fixed; bottom: 0px; width: 100%;">
<p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>
#myElemId {
width: 100px;
}
Note the fixed width; this is essential for margin: auto to work. If this doesn't solve it, then there must be a problem elsewhere.
Edit: You'll also need this (jQuery):
$("#myElemId").css({
left: window.innerWidth/2 - $(this).css("width")/2
});
This allows you to set the width to whatever you want without having to update the rest of the CSS code.
How do I center a div in a browser so it stays centered even when I make the browser width smaller than the div width?
I am currently using this:
BODY
{
text-align: center;
}
#wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
But the left side of my browser blocks the div when I resize.
There is a dirty workaround for doing this:
#wrapper {
width: 1000px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -500px; /* width divided by 2 */
}
You may need to apply overflow: hidden to a parent element to prevent scrollbars.