http://puu.sh/4k57Z.png
When I open up a modal using bootstrap it unnecessarily brings up a slider bar on the side.
Is there anything in CSS that would be causing this?
How can I make it not do this?
CSS for the modal
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
display: none;
overflow: auto;
overflow-y: scroll;
}
When I open up a modal using bootstrap it unnecessarily brings up a
slider bar on the side. Is there anything in CSS that would be causing
this?
This: overflow-y: scroll;.
A value of scroll says to "show a scrollbar regardless of whether or not you need to do so".
This value [that is, scroll] indicates that the content is clipped and that if the user
agent uses a scrolling mechanism that is visible on the screen (such
as a scroll bar or a panner), that mechanism should be displayed for a
box whether or not any of its content is clipped. This avoids any
problem with scrollbars appearing and disappearing in a dynamic
environment.
Source
You can omit that property entirely and the preceding overflow:auto will cause a scrollbar if one is needed.
Related
As the title, I was trying to create a CSS print style-sheet and encountered this problem. When I tried to print a full-screen overlay with scrollable content, only the content displayed will be printed and the non-displayed content is somewhat ignored. I was wondering how to tweak the print mode with CSS so the full-screen overlay will have the same behavior as a regular page(the full content will be printed no matter if it's currently on display)
as you said you're on an overlay, your html's body tag could have scrolling disabled and position fixed.
// You need to remove below css properties
body {
overflow: hidden;
position: fixed;
}
I assume your overlay is an img or div with background-image set.
You could modify its positioning rules only if the page gets printed with the media-rule
#print {
/*css code on print*/
}
and the positioning for filling the eitire screen is possible with:
position: absolute; /*maybe try "fixed"*/
top: 0;
left: 0;
width: 100vw;
height: 100vh;
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
I'm trying to disable scroll for a popup to appear. I'm using the following code:
height: 100%;
overflow: hidden;
When I apply these styles, I go to the top of my page. I want to prevent scroll, but also stay in the same position. This is for a Sign Up popup. So, I want the users to be able to see what made them want to Sign Up in the background. Any ideas?
You should use overflow: hidden; on body, and simpliest way to make popup 100% on height and width is to give popup wrapper position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000 Z index is for you to choose (so popup won't be overlaped by other container).
Although the scroll is hidden, you can use window.scrollTo() function to set the scroll wherever you need, something like
window.scrollTo(0, 0);
You can get the scroll position before opening the sing in dialogue this way.
window.scrollTop
window.scrollLeft
That could be the x and y you're looking for
I want my navigation bar to be fixed at the top, but when I put the css coding in, all the other buttons on my page stop working.
This is my CSS
#header {
position: fixed;
left: 0;
top: 0;
bottom:200px;
padding:inherit !important;
width: 100%;
z-index:9999;
}
I have tested it and the website works fine when I take this out.
I would assume that the since your layout is fixed and you are using the position properties and z-index that your #header is above everything else and putting an "invisible barrier" between where you click and the buttons underneath all buttons below 200px from the bottom of your screen should be clickable to see for yourself try adding a background color to see what is going on. Removing the top and left positions will help and if possible you might not even need to use the z index property depending on what you are trying to achieve.
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.