I'm trying to rotate a wide table (work schedule, see example image below) for printing purposes. The reason I'm doing this is because I want the table to stretch over multiple pages so when you print it on paper you can put the different sheets together and get 1 decent sized, readable table/schedule.
Now the problem I'm having isn't the rotating itself, it's the number of pages when trying to print the table. Instead of expanding the table to the next page it's cut-off so you'll only see the top part.
Now Google Chrome does the printing just fine, it spreads the table across 2 or 3 pages like I want it to. I'm having trouble however getting the same result in Firefox or IE.
I'm using the CSS transform:rotate method to rotate the body/schedule and get the wanted result in my browser (see below).
transform:rotate(90deg);
-ms-transform:rotate(90eg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
I've tried adding margins, paddings to the table but it only moves the table around the page instead of expanding it to the next page. Adding overflow (body *{ overflow:visible !important; }) only scaled the body down so it'll fit on 1 page.
Is there any way to print this wide table on multiple pages so it's still readable for FF & IE?
Thanks in advance.
Example image (usually there's text in the time-blocks):
(Normal printing in landscape mode won't do because the text becomes too small to read.)
When you use a css rotation the actual dimensions don't change.
So if you have a block that is 100 x 20 px and you rotate it. The browser will still see the 100 x 20 px block, while you see a 20 x 100 block. Adding margins and padding's wont change this, you will need to modify the height and width.
I guess the simplest method would be to add an invisible div that has the same height as the tables width and vice versa. You can use javascript for this.
#media print {
#page {
size: landscape;
}
div.landscape-parent {
width: 585mm;
height: 450mm;
}
div.landscape {
width: 585mm;
height: 450mm;
transform: rotate(270deg) translate(-585mm, 0);
transform-origin: 0 0;
align-content: end;
}
div.content {
padding: 10mm 10mm 10mm 10mm;
}
Related
What I'm trying to achieve is to print generated labels in a very fixed format. The paper they will be printed on is self-adhesive and pre-cut, so the restriction would be to print them in exact positions on the page.
To achieve this purpose, I'm making use of the window.print() function in javascript in a separate window that contains only the grid-like structure.
The problem is that I can't seem to be able to override the margins. I would have expected top and left to be 0, but they are set to something somehow. I would like to have control over what the printable margins are.
This is the most promising version I've tried:
#page {
width: 210mm;
height: 297mm;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
I've also tried setting negative margins, on the #page element and to also wrap the divs in a parent div and set negative margins on that and they were ignored, got exactly the result in the image.
I also don't have hidden elements on the page. The window that is opened contains just a parent div with all the little rectangular divs in it.
The inner divs themselves have no margin and no margin is set up in the browser Print prompt.
I'm also open to alternatives. I was going for a front-end solution, but my backend is PHP. I wouldn't find a server-side solution adverse, but I need to make sure I will be able to have a 3 mm margin on the right, between the label and the edge of the paper.
I Have tried the following:
height="window.innerHeight*5"
Which produces either 150px tall or 153px tall with no pattern between the two
height="window.innerHeight"
Which produces the same result
and the css 100% attribute
Which always produces 153 px rather than one of the two listed above.
I am trying to add an easter egg so it may be hard for you to take this request seriously when you see it.
My site is http://joeybabcock.me , and if you enter the konami code((arrow keys here)type up, up, down, down, left, right, left, right, (letters here)b, a) it will open my easter egg which does not cover the whole Page. Currently i have it set to the 100% attribute.
Set the height of the body and set the element overlay go be fixed with a height/width of 100%. There is no need for JavaScript.
body { height:100%; }
#breadfish {width:100%; height:100%; position: fixed;}
When I shrink the width of my browser window (Firefox v26) so that only 1/2 of my home page is shown, the horizontal scrollbar appears on the bottom of the browser, which is fine.
But if I scroll the page to see its right half -- that right half is blank. In other words, after horizontally scrolling to the right (which moves the page's content leftward, obviously) -- the right side of the page does not redraw. It stays blank. Even if I hit the refresh on the browser URL bar.
I looked around and saw several posts. This one seemed to be exactly the same problem (only difference was, theirs involved the vertical scrollbar).
So I took the suggestion there -- which was to set my outermost content div (called wholePageDiv in the code below) and also my outerDiv to 'min-width: 100%" but this changed nothing.
Here's the very simple code:
<html>
<body>
<div id="wholePageDiv" class="wholePageDivForCentering">
<div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%;
display: inline-block; overflow: hidden">
(not shown: a bunch of divs with text)
</div>
</div>
</body>
<html>
Here is the wholePageDivForCentering CSS class, with the change made per that SO post I read:
.wholePageDivForCentering
{
/* width: 100%; */
min-width: 100%;
/* height: 100%; */
min-height: 100%;
white-space: nowrap;
margin: 0 auto;
}
I have looked at other websites to see if they exhibit the same "right side of scrolled page does not redraw" problem. On other websites I tested, I shrink the browser to 1/2 the width needed to show the whole page, then I scroll to see the right 1/2 of the page -- all other websites I check are successfully redrawing the right-side content as I scroll.
Do I have a CSS style problem above?
EDIT: I hit F12 in my browser and use the 'Inspector' tool and I clearly see that the only visible content is within the wholePageDiv and this div is not expanding at all, to the right, as I scroll to the right -- the Inspector shows that for whatever reason my outermost wholePageDiv is remaining the same fixed size as the viewport, and when I scroll to the right, this viewport outline as shown by the Inspector simply shifts leftward and does not expand on the right side to accommodate moving the scrollbar to the right.
I have added your html and css in a fiddle and it scrolls fine for me. The text of the div is displayed with no issues: http://jsfiddle.net/micahSan/UucLB/3/
same code as the OP
Can you replicate your problem in a fiddle so we can all see it?
I solved this (for now) by either hard-coding the div's width, or by programmatically increasing the div's width as the width of the browser window/document was changed. Hopefully will find a less kludgy solution later.
I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.
I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP
I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.
Use this CSS:
body { overflow-y: scroll; }
You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html
The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.
Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks