I have a webpage with dynamically populated tables. They are wide, so they have horizontal scroll bars when being displayed on the page.
My problem is that when I go to print, the tables are cut off by a little bit. As a solution, I want to reformat the tables by changing the contents of some <td> elements to make it fit, for example:
//before
2014-01-23T18:28:35
//after
2014-01-23
18:28:35
This will decrease the width of the table so that it will fit on one page when printing.
I have two ideas so far:
When I dynamically populate the table, also populate a second table with the modified data. When on screen, the original table will be displayed, while the second one will be hidden. When printing, the original table will be hidden, and the second one will be displayed.
Call a JavaScript function or use CSS to modify the contents of <td> elements only while printing. (Is this even possible?)
What is the best approach for this situation?
EDIT
I am not asking about using a CSS stylesheet only when printing. I have already done that, and shrunk the font size to the minimum size (in my opinion) for human readability.
You can use a stylesheet for print.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
The styles defined there are only displayed when you are printing the page.
There is a #media print thing you can add to your css to change the styling of how things print.
So if you just want to shrink some td's you can do this for example:
#media print {
td {width: 50px}
}
Here, here and here are good examples of how you can do this. It's very powerful stuff, you can change just about anything to make the printing look completely different.
You can add this to your existing css file or make a completely new file that just has your printing css in it. Most people go for that second option, so all that css is together in the same place. If you do that you have to add media=print to your css link:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT AFTER QUESTION CLARIFICATION:
You could do a minified version of your option number 1.
Instead of making two complete tables and hiding one, put divs into each td that needs two types of data. Hide one for the screen css and then switch which one you are hiding in your print css.
This seems like less overhead than a completely different table.
So something like this:
<td>
<div class='screenShow'>Show this on the screen</div>
<div class='printShow'>Show this when I print</div>
</td>
Then the css would be:
#media screen {
screenShow {display: block}
printShow {display: none}
}
#media print {
screenShow {display: none}
printShow {display: block}
}
or something other than block, whatever makes it look right.
I ended up going with the solution in #Bobo's comment.
In each <td>, I put both options of text in <span> elements.
<td><span id="hideOnPrint">SCREEN_TEXT</span><span id="hideOnScreen">PRINT_TEXT</span></td>
In the screen.css, I only hid the id="hideOnScreen".
In the print.css, I only hid the id="hideOnPrint".
Related
I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file.
<html>
<head>
... some js and css ...
</head>
<body>
... header ...
... content ... <-- need to replace that by new content
... footer ...
</body>
</html>
Everything is rendered well (header/content/footer).
I also have another file where I've got content to be placed on this webpage (based on bootstrap 4) and I am not allowed to modify existing js/css files (they are loaded via API, so created dynamically).
Problem is that this content looks well when I render it it in separated file as it is. Once I replace old content with new (leave header and footer) and add css files it looks well but of course everything is smaller due to this font-size set in html tag.
Is there any way to make it working?
I've tried to unset current font size by font-size:unset also in html tag (by adding and targeting class) and then my content is rendered properly but unfortunately header and footer have to big font then.
Looks like the best way would be to unset this font-size only for this new content which can be enclosed in a div but I didn't found a way to do that.
Here is a jsfiddle: fiddle
It basicaly shows my problem, html tag styling is loaded with external js API and cannot do anything with that.
I am backend programmer so do not have much experience with all css stuff. Need help with that...
If you can add all your new content in a div, as you say, and then add a class to that div like:
<div class="content">…</div>
Then your css to set the font size would be:
html .content {
font-size: 100%;
}
Now for your specific problem:
Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:
html .content {
font-size: 160%;
}
You should not need the !important flag for this to work.
body {
font-size: 137.5% !important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}
I have a maddeningly simple task (and be patient with me, I'm new to all this): I have a div with a table inside, and the table contains one row and two cells, side-by-side. One cell contains header text, the next cell contains a paragraph of body text. It looks great on large screens, bad on small ones. So when the viewport width goes below 890px, I want to pile the two on top of each other by breaking the cells into two different rows.
First, just let me say that, yes, I have to use the table. I know using tables for layout is clunky, but it's necessary for vertically centering everything inside the div.
So my solution to this problem was to write some JQuery that would take the current contents of the table, fetched using the html() method, compare them to the "initial state" contents of the table (at larger viewport widths), and then replace the contents with a "final state" string that just has </tr><tr> inserted after the first cell's </td> tag.
The variable containing the initial state table contents is exactly the same as the table contents returned by the html() method but with \n\ at the end of each line except the last (the extra backslash to tell JS that it's a multiline string). I ran a strcmp on the strings in MATLAB to ensure I didn't make any stupid mistakes, came back true. And when I ask JS to print both strings to the console, they look identical. But when I ask JS if they're ==, I get a false.
So I made a second variable for the initial state with \r\n\ instead of \n\ because I read that some browsers do newlines differently. Checked if the current table contents were equal to either of them. Nope.
What's going on here?
Tables should not be used for page layout. There are tons of css tricks to align a div and the contents inside. and for the responsive design you can use bootstrap. See bootstrap or you can use media query to write your own responsive design. bootstrap code should look like this
<div class="row">
<div class="col-lg-6 col-sm-12">
//some code for part1
</div>
<div class="col-lg-6 col-sm-12">
//some code for part1
</div>
</div>
or write your own responsive CSS using media query..
HTML code is :
<div> <!-- header wrapper -->
<div class="menu1 col-1">
//some code
</div>
<div class="menu2 col-2">
//some code
</div>
</div>
CSS file will be:
.menu1,menu2 {
display: inline-block;
width: auto;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
/* For desktop: */
#media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
}
hope this will help you in design..
What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}
I have an online viewer(popup) where Images are displayed in a div, along with some buttons to zoom in/out or rotate the image. Now I want to print the image programatically on certain user action. Is there any option to print just the from the browser or to print from a stream. I can't install extra plugins on the browser to accomplish this. If not printing an image directly, can I somehow print the image if I convert it into pdf before printing? I have tried finding a solution for this but the only thing I could find was javascript's window.print() function.The problem is that it will print the entire page including the buttons if I use it. I just want to print the image.
You can use the media print option to set contents of the body to hidden and only the image you want to print to show. Add a wrapper to contents in the body and append the image you want to print out side the wrapper with class print and add the following css.
<style type="text/css" >
.content-wrapper{
display:block;
}
.print{
display:none;
}
</style>
<style type="text/css" media="print" >
.content-wrapper{
display:none;
}
.print{
display:block;
}
</style>
I have a page with a top navigation area, a side navigation area, a control button area and somewhere in the middle a DIV with an id="content" that contains content.
I would like to be able to print just the contents of that DIV. I realize I have many lines of code making my other areas invisible and resizing everything but is there some alternative? Is there some way I can just print the contents of the DIV?
Take a look at using Media Types - specifically #media print - in your CSS to specify styling that only applies to printing.
This way, you can write a stylesheet that hides everything except your "area inside a DIV".
Use a css print stylesheet putting display:none in the fields that you don't want to print.
Use the tag link like this:
link rel="stylesheet" type="text/css" media="print" href="print.css"
OR
#media print {
BODY { font-size: 10pt }
}