I'm trying to have table borders in my PDF using pisa to generate the PDF from my html page. According to the documentation, I should use CSS to display borders in my table. However this is not working out. I can see the borders on my webpage, but on the generated PDF there's absent. Is there something I'm missing or doing wrong? I'm using the following styles for the table:
table { border: 1px solid #666666; border-collapse:collapse; border-color:#ccc; }
td, th { border: 1px solid #666666; font-size:11px; line-height:13px; border-bottom:1px solid #666666; vertical-align:top; padding:5px; font-family:"Lucida Grande", Verdana, Arial, sans-serif; }
I forgot to update this question after I got the answer....the CSS should be in the HTML page that'll be used by pisa. Apparently external CSS stylesheets don't work. Hope this will someday help someone else
Just to correct this - external css does work in PISA but you need to ensure it can locate the css at render time. See django - pisa : adding images to PDF output for more infor on how to do this.
Regards
Tim
For me, it worked if i assigned a class for it.
for example to draw a border around the cell, use below css class:
td.box{
border: 1px solid #666666;
}
in td, add the class:
<td class="box"> Something </td>
I had the same problem.
the solution was:
1 - CSS should be in the HTML page,
2 - CSS should be out of #page attribute.
Setting display:block for <table> and <td> elements solved this problem for me.
Related
I would be very grateful if someone could help me please.
I got to add an additional CSS code to the "code blocks", with the below code:
pre.wp-block-code {
border-left: 9px solid #F26C4F;
background-color: #1B325F !important;
padding: 15px;
But, I I need to edit also that tags, i.e., for the inline code.
Let's say I am writing a paragraph and need to insert a piece of code inside of it, as for example "top command", when the top would have to be inserted between and . So only the word "top" would be "printed" differently (with a custom background, for example).
How to achieve this, please?
Thanks in advance.
By using the tags as selector, alternatively using p in addition.
Something like
p code {
background: gray;
border-radius: 2px;
padding: 0.15em 0.35em;
white-space: normal;
}
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
Yahoo keeps inserting blue dotted links within our HTML emails on plain text within a <p> tag. It seems to be doing this to locations mostly.
I've tried to override this using inline styles like:
style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt; text-decoration:none; outline: none; -moz-outline-style: none;"
I've done a bit of research on this and it seems like it may not be possible to remove them, but I'm just looking to confirm that.
Have you tried adding the following to the CSS before </head>:
.yshortcuts {border-bottom: none !important; color: #000000 !important}
There is a little bit more info on this over at Exact Target's blog.
When using html tables and css. I have used rowspan="2" to combine to rows together, but when i use background in the css, its not going right to the edges of the table.
Where am i going wrong? This is a really simple question i know.
Then the CSS is
#messages th{
background-color:#f0f0f0;
color: #FF9912;
font-size:14px;
font-weight:bold;
font-family: Arial, sans-serif;
border-right: solid 1px #666666;
}
#messages td{
font-family: Arial, sans-serif;
font-size: 14px;
}
I'm just guessing here, but aren't you coloring only the cells of the table, and not the spacing between the cells?
See this page:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_color
If you are trying to set the background on a th element, Tom Haws is probably correct that there is some sort of cell margin or padding in effect. If you use firebug for Firefox or "inspect element" in chrome you can find out everything that is impacting th and turn them on and off. You could also use <thead> to surround the headers, and assign the background color to that instead of th
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}