I am generating a PDF Report using phantomjs.
Below is my CSS that avoids splitting text across two pages. It moves the entire line to the new page as expected.
.columns {
page-break-inside:avoid;
}
I wish to insert a margin and border at the beginning of each page, but haven't found a way to apply styling after these page breaks occur. Adding something like below adds the styling I desire to every column class, but I only want it applied to the first occurrence on each page.
#media print {
.columns {
border-top: .1rem solid #f0f1f4;
border-radius: .2rem;
margin-top: 40px;
}
}
Related
I'm using the most recent version of Wordpress in combination with a theme.
On that theme there is some css code I don't need/want and which makes my customized page look bad. This would be one example:
#content table {
border: 0;
margin: 0 0px 24px 0;
text-align: left;
width: 100%;
vertical-align: top;
}
#content tr {
vertical-align: top;
}
So far I always commented out such parts directly on the style.css of that theme. But like that I'll always loose my changes whenever I update that theme.
Now I've started to bring all my changes into the custom css directory of that theme. This works good for changes, however I have no idea how to remove the part I'm usually commenting out.
Any idea how to do that?
This question aims also to such changes where I'm commenting out parts of that style:
#content tr td {
border-top: 1px solid transparent;
/*
padding: 6px 24px;
vertical-align:top;
*/
}
Hopefully you understand what I mean :)
You need to create a child theme and then import the functions.php and style.css in it.
Then add your changes here.
You will never lose it whenever you will update your theme.
Please let me know if you want code too...
Since you are using a separate custom css file, commenting will obviously not work as your main css file will still contain some of the same style sets. So, to remove a style set entirely do the following on your custom CSS file.
#content table {
display:none!important;
}
You can do this for each style set or add them all together, separating them with a comma. i.e.
#content table, #content tr {
display:none!important;
}
In regards to the second part of your question, you can't remove just part of a style set but you can overwrite it by continuing to use the !important declaration and using opposite values such as changing padding from 24px to 0px if you don't want any padding. You will need to realign to your preference or set it to baseline which is the default. (Again, this goes in your custom css file)
#content tr td {
padding: 0px 0px!important;
vertical-align:baseline!important;
}
Notice that I didn't include border-top: 1px solid transparent; because your main CSS will still apply this part of the style so you only need to overwrite anything you don't want or wish to change on your custom CSS being that there is no way for you to comment style sets in the same manner as you would using a single CSS file.
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
I am using a plugin on one of my pages and there seems to be a small conflict with bootstrap and the css of the plugin.
Here is an image of the issue:
Are you can see, the two selects are pretty long and they are on two seperate lines. The CSS code from Bootstrap that is causing that is:
select {
background-color: #ffffff;
border: 1px solid #cccccc;
width: 220px;
}
When I turn that attribute off in the Firefox Console, it renders it normally.
How can I go about ignoring the width in the select without messing with the core CSS?
Make an new rule that will override the last one.
select {
width: initial;
}
if you want this rule to apply only to that specific select, and not all of them, just give it an id, and use the width:initial rule in it's rule set
I want to print a large table (so large that its rows are approx. 3 sheets of papers wide) from HTML. If possible, CSS should suffice for layout and the solution should work with different browsers.
I'm currently defining the following style rules:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
When I inspect the DOM elements e.g. in Firefox 33.0.2 (on OS X) I can see that the rules are recognized, but then when I look at a print preview ( File | Print | PDF | Open PDF in Preview) all columns that don't fit on the first page are cut off, i.e. I receive 1 page of printed output instead of 3. I have also tried Internet Explorer 11 and 10 to the same effect.
So how can I layout large HTML tables (ultimately large both in terms of columns an rows) for print out using CSS?
Bonus question: If page-break style components indeed only apply to block-level elements as is indicated in this previous answer, would it help if I construct my table from divs instead of tds when aiming for print output?
UPDATE
Here is a relevant sample that I just tried on JSFiddle. (I don't have an account there, so FWIK I cannot provide a direct link.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
If I try to print this table (e.g. by applying This Frame | Print Frame ... | PDF | Open PDF in Preview to JSFiddle's Result view in Firefox 33.1 for OS X and for Paper Size/Orientation A4/Portrait) I get one page of output. All columns but the first and part of the second are cut off.
You absolutely need to move away from a table if you need readable vertical printing on the page. Tables are great for display on the page when it's tabular data but are not a viable solution for printing as they don't respect flow.
There are plugins (like this one here, no affiliation – just a Google result) that will do this automatically for you, but here's the example. When you use this, make sure that the #media print is listed appropriately. To test locally, you can change that to #media screen.
That won't show the #page rules listed, but those are visible via a print preview.
Hope this helps:
Fiddle for printing in portrait
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
#media print {
#page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Edit - Printing horizontally across several pages:
Okay, so this is probably a far less common use case, and we have to do some goofy things with it – so fair warning. I'll try to explain this step-by-step as it's cryptic and obnoxious.
Fiddle for printing in landscape here!
CSS
#media print {
#page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
This is the part that matters, as it's setting your print directives. Most of this is stuff we've seen in the original (with some tweaks as I was playing with it).
The part we care about comes here:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
What we're doing is flopping the whole thing on its side, and then sliding it to where we expect it to be. translate(8.5in, -100%) is telling the browser – Slide this element 8.5 inches (the width of a standard letter paper in the US) to the right, and then slide it up 100% of its height (the negative indicates up as opposed to down). We slide it to the right 8.5 inches so that it'll appear at the top of the page when rotated. We slide it up its calculated height so that we don't have an ugly gap to the left of the table when the rotation happens either.
Then, we instruct it that we want all of those calculations run in relation to the bottom left of the element's normal position in document flow. This keeps this crazy long table from being rotated way off to the right by setting the left property. The bottom property is important because we're rotating it clockwise a quarter turn, and if we did that from the top, it would be off the page to the left. That quarter turn is described in the next part of the transform statement: rotate(90deg);
Voila. The thing prints across multiple pages.
Before you ask: No. There is no way to prevent the page break inside the element of which I'm aware. I know it's obnoxious, ugly and all that garbage, but we can only work with the tools which we're given.
Update Firefox confirmed working:
page-break-inside: auto; is the default style, so unless you have a rule setting them differently, those rules will do nothing.
If your table isn't being broken onto multiple pages, then it's most likely because there some other rule you added, which prevents it - my guess an overflow: hidden.
What you first should do is remove all styles, and see if that prints on multiple pages. If yes, start adding your styles back (rule by rule, or if necessary line by line) to find the problem.
If you want to force page break you should use page-break-before or page-break-after. You need to know that the styled element should contain a non-empty block-level element and that it can't be absolutely positioned. However it is quite inconsistent on tables elements. Which leads us to your last question : yes, it would be more consistent to build your tables with divs.
However, considering what you want to achieve (printing large horizontal tables) you should know that trying to fit 3 pages into 1 can't work as your content won't be readable. As a matter of fact, the only best practice would be to use a vertical layout instead (just for print or for both web and print).
I am trying to fix a couple of problems when you view this web page in IE7.
(the web page looks great in iE8 and iE9)
I have uploaded the single web page onto a test site:
http://www.jrdesign-website.co.uk/bar_menu/bar_menu.html
When the page has loaded, scroll down to view. You will see the prices on the right hand side. The small duplicated full stops should line up with the prices and food description.
Any advice would be greatly appreciated
SO your code has a with the dots underline on it as a repeating background and within that there is a wrapper div floated left with the food item name and nested within a that a class .bar_font_bold_med which is 'float: right'.
Two possible ways of getting to a solution.
1\ Why not have the price i.e. the in its own instead. That will sort out the positioned-on-the right goal. It will also allow you to use or middle or top etc on the price to independently adjust its vertical position in relation to the food item. Also use CSS to supply the dotted underline. Eg consider using a border-style on the lefthand thus.
border-bottom: 5px dotted #fff
How you attach the style is up to you. Perhaps a CSS classname on the relevant s is the best way i.e.
<td align="left" width="565" height="xxx"
bgcolor="#000000" background="images/yellow_dot.jpg"
... becomes...
<td class="foodItemCol" height="xxx">
...and you have the CSS styles
.foodItemCol {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
Or if you go with my suggestion of having another for the price then use this CSS selelector which means you will not have to bother adding a classname
#bar_menu_text table td {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
#bar_menu_text table td + td {
border-bottom: none;
width: auto;
background-color: #000000;
}
What the second style selector is saying where the second or subsequent sibling appears after the first then overwrite the styles that where applied in the '#bar_menu_text table td' rule above i.e. so the price column does not have a dotted underline.
PS You have used a WYSIWYG editor to generate the code for this page haven't you? I have modified my answer baring that in mind as I guess you aren't used to coding HTML /CSS by hand.
PPS you don't need the z-index:5 or any z-index's at all whatsoever...they are only useful when the element the are applied to is position: relative or position: absolute etc.
How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that's hidden or suppressed for the active tab?
In other words, I'm trying to do the same thing that StackOverflow does for its tags:
My tab bar is set up as an ordered list with
ul
{
list-style: none;
}
li
{
float: left;
}
Update: I've already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow's version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab's border overlap the div's border (and I'm not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I'm trying to understand the general concept of how overlapping part of a container's border with the content's border works instead of copying and tinkering with CSS until I get something that appears to work.
All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>'s a selected class, and make that one have a 1-pixel higher height.
Here is a very simple example: http://jsfiddle.net/V6gzS/
ok to point you in the right direction use firebug or chromes element inspector and just pick out the bits you need, so on this site for example what you are looking for are called tabs and they are styled like so
#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
}
this is just a part of it but you can learn a lot by looking at some code
As I understand it you are capable of making the buttons by yourself, with the horizontal bottom line.
If that is the case, then make sure that this horizontal line is made as a border-bottom: solid 1px #CCC property on each button (the color might be different). At each page you then add the id id="current" to that one button that is the active page. In CSS you write:
#current {
border: solid 1px #CCC;
border-bottom: 1px solid white;
}
If you have any problems it might be solved by adding !important like this:
border-bottom: 1px solid white !important;
Therefore, this is just four extra lines of code in CSS and one extra HTML attribute in each of the files.
If dynamic menu
If you have a menu that is not static on every page, but maybe dynamically generated or placed in an included file, then the above will not be possible. Because then you can't easily add the new id on each seperate page.
In that case you might do some dynamic adding of the attribute. If a server side language is used, e.g. PHP, then you might be able to easily set up an if{...} command that checks the URL or a GET request or alike. Else you might use some javascript to check each button and add the attribute id if the button text equals some header on the page.
I hope you understand. Good luck.
I did it like this:
ul {
list-style-type:none;
}
li{
float: left;
border-bottom: 1px solid #CCC;
}
li:hover{
float: left;
border: solid 1px #CCC;
border-bottom:none;
}