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;
Related
I have some svg files with position: "absolute" in my page, but whenever they're positioned close to the corners of my page they end up expanding the width of my Container element (I'm using Material UI React), I've tried using "maxWidth":"100vw" on the page container, with no success, as well as the prop maxWidth="lg" and "md". If possible I'd like the svg or img file to just disappear into the nothing without interacting in any way with its outside container https://gyazo.com/9d3d8cf86748ac434700ac0b0ceaf1c6
Have you considered doing something like this?
.container {
/* If for some reason the image doesn't fit, hide the overlap */
overflow: hidden;
}
/* Make image sit within it's container */
img {
height: auto;
width: 100%;
}
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 would like to inject an iframe on the right side on a website to create a vertical panel. As "panel" I mean : it should be on the right side, cover the full visible height of the page, not be affected by scrolling, but "push" the website content (as opposed to cover).
I tried modifying padding-right on , but it doesn't work on all websites (and only affect non-positionned elements).
It should work on any website with weird layout, e.g. http://orange.jobs/
Injection is not a problem (it's a Chrome extension).
You can do this via css. To cover the full visible height and make the position of this element fixed on the site do:
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100px;
Try not to use
height: 100%;
as this would be rendered differently by every browser. Use top and bottom instead. You can choose a width with percentage or pixel values.
This css code could be applied to every html element.
If there are issues with positioning try to add
display: block;
or
display: inline-block;
I've added a jsFiddle for this.
Update:
To make the panel not cover the sites content, add a margin to e.g. the body tag:
body {
margin-right: 100px;
}
The margin should be the width of your panel. jsFiddle
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }