I am printing web page using Javascript but I got header and footer contain page title, file path, page number, and date. How do I remove them?
I found similar questions related to this problem like below
Remove header and footer from window.print()
But every solution says to set margin:0 in #page
I tried that as
#page {
size: A4 landscape;
margin: 0;
}
body {
margin: 30pt;
}
It works fine on the first page of my printed page. From the second page onwards, the margin goes to zero.
I have also tried moznomarginboxes but which is deprecated now.
This removes the unwanted data:
html, body {
width: 210mm;
height: 297mm;
margin: 0 auto;
}
#page {
size: auto;
margin: 0;
}
Most likely you will have to adjust the margin and font-size if you decide to use it.
Related
I'm a newbie here, nothing special, just have a little bug with Microsoft-Edge, it adds a random overflow-x while there's no content passing the screen's/browser's width, tried it on different screens and resolutions and the problem still there.
Here's a link of what I've done, if you want to test it on Microsoft-Edge : http://microsoft-edge.thefreecpanel.com/
A photo : Photo Showing overflow-x bug
Thanks in advance.
Try to set Margin to 0.
Make a test with code below and let us know whether it solves your issue or not.
html, body {
height: 100%;
}
body {
margin: 0; /* This will stop the margin, setting it to 0 */
}
div {
width: 100%;
height: 100%;
background: #ddd;
}
<div></div>
I'm trying to avoid the margin of the first page. All tables (there are many) are fitting a page. But the first one has a margin.
I tried: so many ways. Is there a way with CSS to avoid margin on first page? I tried on body, html, page...
I've searching a lot. But I can't find a solution. I though of creating an element and put it on the first page.
My page has many tables. One per page. Except the first one fits on one page due to the margin.
#media print {
#page {
margin: 0mm;
size: auto;
padding: 0;
}
#page:first {
margin: 0px;
color:blue;
}
html {
margin: 0px;
}
body {
display: table;
margin: 0mm 0mm 0mm 0mm; /* margin you want for the content */
margin-top:0px !important;
}
.tableSchedule tr {
padding-top: 0px;
height:45px;
}
.tableSchedule {
table-layout:fixed;
width:1130px;
margin:0;
page-break-after:always;
}
I had a similar problem with images and divs in the past. Turns out that even if you set the margin to 0 some browsers will seperate elements, particularly inline elements, with a space of 1 em. Setting the font-size: 0 for the parent element removed that "phantom" margin. Just don't forget to change the font size back for the child elements!
Alternatively you can style the first table with a negative margin to cheat. i.e. margin-left: -15px . Or so depending on your needs.
Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.