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.
Related
My app has two columns, left side being a textarea, while the right side is the result calculated from the text area. But my result column would overflow the fixed window, while textarea would scroll by default.
So I've tried to set both the whole row and its parent to overflow: auto, which let me scroll when I've got enough input, but at the expense of having my separator not full height as well as having a delay after I've wrote into my textarea, before the dix snaps into a bigger height...
My final solution was to use JS & Jquery to check when content is overflown, to alternate between height: auto when it is and height: 100% when its not. That also kinda worked, but with wonky delays yet again...
const editor_js = document.querySelector('.editor');
const $editor = $('.editor');
$('.input').bind('input propertychange', function() {
console.log('Textarea changed');
if(editor_js.offsetHeight < editor_js.scrollHeight){
$editor.css("height", "auto");
}
else{
$editor.css("height", "100%");
}
});
Anyways I am at my wits end. I just want to have my columns consistently scrollable as one entity, while keeping the separator full height at all times. Hope you can give me some suggestions. If you want to directly do some attempts at my app, here's the link
The simplest way for you to get that effect would be to add that vertical border as a pseudo element on the parent. When I say simple, I mean it would be easy to set it and forget it. CSS would deal with it and it would be independant of the size
I think your best option will be to calculate the height of your text area in javascript and set the css style to it.
Then, Make sure you have the following css:
textarea.col-9.input {
overflow: hidden !important;
}
.main-body .editor {
overflow: scroll !important;
}
.col-lg-5.col-md-7.col-sm-8.main-body {
overflow: hidden;
}
I've tried it in Chrome's developer tools and it works well.
I've searched tirelessly and although I've found many people asking about this problem, there don't seem to be any consistent solutions.
We have a page on which a user can enter a date range, then press submit to return a table of data. A "print" button exists which obviously prints the generated data.
All browsers seem to be able to split the long table into several pages, as expected. We can also get some predefined footer text to show up on each page by using a footer div with some CSS like this:
.footer {
position: fixed;
bottom: 0;
}
The only problem is that the table rows have inconsistent heights, so on some pages there's plenty of room for the footer, but on other pages the table and the footer overlap.
Things I have tried:
#page {
margin-bottom: 10mm;
}
Adds a margin, but the bottom: 0; fixed position of the footer is now considered to be too high up, i.e. there's still an overlap but with a bunch of space at the bottom of the page. Setting the bottom property to a negative value just makes it appear at the top of the next page instead.
#page {
padding-bottom: 10mm;
}
No noticeable effect at all.
...And that's pretty much all I can think of. What can we do about this? Do we need some kind of custom JS solution to calculate the number of rows on each page and insert a footer manually? There must be somebody who has had success with printing footers; it doesn't seem like an uncommon requirement.
Please try to add this at the bottom of css file or after the last body affecting rule eventually adding also !important:
#media print {
body {
padding-bottom: 10mm;
}
}
There may be a more elegant solution, but you can do this in JS with an algorithm along the lines of:
while there is still vertical room left...
output a row to DOM
measure height of new row and recalc how much vertical room is left
For getting the height of an element, you could take a look at this other answer.
That may seem like a pain, but you'll have a lot of control over your rendering, and it should work fine.
i was having the same problem last day i search for hours to solve it. the solve was
adding these to css.
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
ps: don't add relative position to the table never because it wouldn't work properly.
I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before and :after tags for the arrows.
The maximum width for all the breadcrumbs put together is 735px as that is the size of the container element.
Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width will depend on the number of breadcrumbs which are currently visible.
I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.
So I need to specify a max-width, but the max-width will depend on the width of the other breadcrumbs.
For example, if all the breadcrumbs have a fairly long title, the max-width will need to be small enough to allow all breadcrumbs to fit in the container.
But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.
Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.
http://jsfiddle.net/5CLYt/
The second example in the jsFiddle shows how the max-width needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.
Beside the answer of #JAYBEkster, you could consider using flexbox.
Here is a great resource: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've updated your fidle: http://jsfiddle.net/NicoO/5CLYt/1/
/*
COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#container {
display: flex;
justify-content: space-around;
list-style: none outside none;
margin: 0;
padding: 0;
}
I know this is not what you want, since the space between the items is growing and not the items it self. But maybe it' the right direction.
Maybe keep this question updated.
Update 2: flexbox is awesome.
It works with firefox: http://jsfiddle.net/NicoO/5CLYt/3/
All you needed to do was:
.breadcrumbButton
{
flex: 1 1 auto;
}
You should add display:table for your container; add display:table-cell for each child and remove floating;
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;
}
I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative