I am running into an issue when printing module content, and this happens to all browsers. When I print the modal content, it only previews the first page and anything after the first page would get cut off. I have tried debugging in Chrome print emulator but still cannot figure out a solution.
At some point, I added a scrollbar to the print emulator and I can scroll down to see all the content, but when I print preview, it shows the scrollbar and still cuts off any content after the first page. I don't know why print preview behaves so differently from the emulator.
The project is in react, plain modal that doesn't use any third-party library like bootstrap modal.
Media query for print:
#media print {
body, html {
height: 100%;
overflow: visible !important;
}
.account-header {
display: none;
}
.list-wrap {
height: 100%;
// overflow: scroll !important;
}
.account-content {
margin: 0;
padding: 0;
border: 2px solid red;
position: absolute !important;
overflow: visible !important;
visibility: visible !important;
display:block;
}
.account {
background-color: none !important;
display: inline-block;
font-size: 12px;
border: 1px solid blue;
}
}
Note: .list-wrap is a class applying to the parent container for .account-content. Using the overflow: scroll style would add a scrollbar to the print emulator and I would be able to see all the modal content there. But in the actual print preview, it still shows the first page only.
The problem, when printing, is that you have to set the page size property. The rules that give you the issues you are describing are the ones related to height.
Depending on how you would like to print pages and how you want to handle page breaks, you have to act as described in the following documentation:
https://www.w3.org/TR/WD-css2/page.html
The sections you should check are, at least:
https://www.w3.org/TR/WD-css2/page.html#page-size-prop
https://www.w3.org/TR/WD-css2/page.html#page-breaks
Another article that can help you is this one:
https://www.jegsworks.com/lessons/web-2/html/step-mediaprint.htm
If you want be make sure to have a more wide as possible compatibility with browsers, this GitHub repository may help you:
https://github.com/cognitom/paper-css
Related
I am currently in training and to carry out a common thread project, I would like to stand out from my comrades who use a responsive navbar which displays a burger menu with a "hidden" menu which is displayed as a footer after reducing the window. (which only appears from a specific dimension)
For example the website https://www.parcasterix.fr/
I've been racking my brains for 3 days and I haven't found
Thank you
Start with the basics, make a container and use a nice natural HTML markup.
Naturally, elements are in display:block, this makes them following the page size. You can make them display:inline-block, so they stay on the same line, but will always follow the flow, and show their content.
No need to go complicated, at least on the beginning. But even after.
.container {
resize: both;
overflow: auto;
width: 80%;
height: 140px;
}
div {
border: 1px black solid;
display: inline-block;
padding: 10px; /* Just to make it nicer */
}
<div class="container">
<!-- Insert your content here and try to resize with the handle on the
bottom right corner -->
<div>Some content</div>
<div>And some more. Hey did you notice?</div>
<div>Elements are just following the flow!</div>
</div>
This is a simplified version, but assuming I've understood you correctly, you can do this simply with a CSS #media query. Hide the footer normally, show it when the screen size is small enough:
/* footer is hidden by default */
footer {
display: none;
}
#media(max-width:400px) {
footer {
display: block;
}
}
Once the screen width is over 400px, the footer will be hidden
I am trying to make my website responsive with mobile phones but for some reason when the screen gets small enough there is whitespace on the right side of the phone in which the html page is not the full width, ive tried adding css which include :
html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-width: fit-content;
position: absolute;
}
but currently the page looks like this:
https://i.stack.imgur.com/Axz5O.png
any idea how to fix this?
It's hard to tell without knowing all child elements.
You can try adding an outline to all tags like
* {
outline: 1px solid green;
}
and check which element is overflowing
I have searched and tried as posted articles. such as
#media print {
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
visibility: visible;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
.modal-dialog {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
}
It's exactly work for bootstrap modal view.
But it's not working on ion-modal-view which has long contents.
A strange point... if page is desktop mode https://d.pr/i/Rl8VFR, then window.print() is working for all pages. but if page is mobile mode https://d.pr/i/NO4fbI, then window.print() is only print first page.
Do you have any idea to solve this problem on ion-modal-view long contents?
Thanks in advance.
Solved issue with a simple modify in printing styles.
When the ionic modal is activated, <body> tag have height: 100% property.
It was a reason to not allow all pages printing.
So when you use print on ionic modal view, you must set
body { height: auto !important; }
It will help. This solution is exactly working on ionic v1.
Thanks
Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?
Thanks!
My website: fanismahmalat.com
It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.
I added the following into CSS in the Chrome inspector and it fixed the issue:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.
The problem is in the image of the laptop that is exceeding in width.
https://i.stack.imgur.com/zlg6R.png
I am positioning the facebook 'send' button at the right edge of my page.
Therefore, when clicking it, and opening the underlying div (where the details of the send information are being filled) it opens to the left, extruding from the page width.
This is why I am trying to move this div to the left when it is opened.
Unfortunately I dont see a way to this without moving also the button since both of these elements are loaded in a cross-domain Iframe (from facebook).
Is there any way to position the popunder div separately from the button?
Will CORS help me achieve this goal?
Many thanks,
junkycoder
Yes, it's possible, you could style it like this:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: 0px;
margin-left: -475px !important;
border:20px solid black;
padding: 10px;
height: 225px !important; /* Edit if you want to restore native border */
}
.fb-send{
float:right;
}
You can check it in here: http://codepen.io/anon/pen/GekKs
It's not perfect, but it does the job.