I'm using DOMPDF to build out a download report of database entries for a shopping cart.
Not sure what code to put in here, it's a very typical html page with some foreach loops to display the content, and it creates the pdf just fine, but none of the css from the file is rendered as css, it gets printed as text at the top of the document.
The CSS is inline in the head of the document as any normal inline css would be.
$export_pdf ="<html><head>";
$export_pdf .="<meta http-equiv='Content-Type'
content='text/html; charset=utf-8' />";
$export_pdf .="<style type='text/css'>
.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.list td { border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.list thead td { background-color: #E5E5E5; padding: 3px; font-weight: bold; }
.list tbody a { text-decoration: none; }
.list tbody td { vertical-align: middle; padding: 3px; }
.list .left { text-align: left; padding: 7px; }
.list .right { text-align: right; padding: 7px; }
table .interior,
table .interior td { border: none !important; }
table .interior tr { border-bottom: #DDD 1px solid !important; }
.list tbody .interior thead td { background: #efefef !important; }
</style>";
Then just a basic table etc.
I can't find anyone else having this issue with inline css. I've seen some posts where people have troubles getting linked styles to work, but this is simple inline css, why is it being interpreted as text instead of css?
Thanks.
-Vince
As weird as it appears, it is due to the simple quotes in the <meta> tag.
Replace them by escaped double quotes and it will work. Could you report this issue in the issue tracker please ?
Related
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I am trying to apply custom styling for one table to a wordpress theme I am using, but I can't seem to get the table to use my custom styling. Am I doing something fundamentally wrong that I am missing?
Here is the form code with my edit class:
<table class="edit"><tr><td><form action="" method="post"><button type="submit"
class="link"><span>Form Approve</span> </button></form> | <form action=""
method="post"><button type="submit" class="link"><span>Form Delete</span></button></form>
</td></tr></table>
//Wordpress theme style
table {
border-collapse: collapse;
margin-bottom: 15px;
}
table th {
background:#eee;
border: 1px solid #fff;
padding: 10px;
}
table tr {
background:#f5f5f5;
}
table td {
border: 1px solid #fff;
padding: 10px;
}
//MY CUSTOM STYLING
.edit table {
border-collapse: collapse;
margin-bottom: 2px;
}
.edit table th {
background:#eee;
border: 1px solid #ffffff;
padding: 0px;
}
.edit table tr {
background:#ffffff;
}
.edit table td {
border: 1px solid #ffffff;
padding: 2px;
}
.edit table does not exist (that would be a table inside of another element that has a class of "edit"), instead you should use .edit or table.edit. Example:
.edit {
border-collapse: collapse;
margin-bottom: 15px;
}
.edit th {
background:#eee;
border: 1px solid #fff;
padding: 10px;
}
Well I cant really tell you whats wrong besides that fact that your wordpress template styling is the exact same as your custom styling.
I don't think you really need the edit class you can just overide the styles with out it and also .edit would go after table so it would look something like this
table.edit {
border-collapse: collapse;
margin-bottom: 15px;
}
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I am trying to style the html helper webgrid but it is not showing my style classes when the page renders.
Here is my style code:
.gridTable
{
margin: 5px;
padding: 10px;
border: 1px solid #000000;
border-collapse: collapse;
min-width: 550px;
background-color: #fff;
color: #fff;
}
.gridHead th{font-weight: bold;background-color: #030D8D;color: #fff;padding: 10px}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow
{
background-color: #FFFF99;
}
.gridTable tr:hover
{
background-color: #CCFFCC;
}
.gridAltRow td
{
padding: 10px;
margin: 5px;
color: #333;
}
.gridRow td{padding: 10px;color: #333;}
.gridFooter td{padding: 10px; background-color: #c7d1d6;color: #999;font-size: 12pt;text-align: center;}
.gridFooter a{font-weight: bold;color: #333; border: 1px #333 solid;}
Here is my webgrid code:
#grid.GetHtml(tableStyle:"gridTable",
headerStyle:"gridHead",
alternatingRowStyle:"gridAltRow",
rowStyle:"gridRow",
displayHeader:true,
columns:grid.Columns(
grid.Column(header:"", format: #<text>#item.GetSelectLink("Edit")</text>),
grid.Column(columnName: "EntityName", header: "Name"),
grid.Column(columnName: "EntityDBA", header: "DBA"),
grid.Column(columnName: "EntityType", header: "Type")),
mode: WebGridPagerModes.All)
Is there some reason I am missing why the style would not be applied?
Two reasons why your styles wouldn't be applied are: if they are not referenced correctly in the layout page or wherever you are bringing styles into your view; or you may need to clear your browser cache to allow updates to the css file to show through.
First: it's commercial software, I can't share a link to it so you can see what's happening. Ugh. Makes everything harder.
I've written a block of css for print purposes. Here were my steps:
Load page in application
copy HTML from developer tools
Paste html into jsfiddle (so, all the classes/structure is there properly)
write the css in jsfiddle--stuff looks like I want it to look
copy css from jsfiddle into my inquiryPrint.css file (the file that loads for printing)
SOME of the css works, some of it doesn't
Things I considered:
An override issue; inquiryPrint.css is the last file loaded, it should apply its overrides last
The print css file isn't invoked only on media type of print...in fact, here it is:
printWindow.document.write('<link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" />');
This is the most important, I think: the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
Things I tried:
Close/reopen
chrome hard refresh (cmd-shift-R)
it's shared code; I
pushed my changes up to our dev environment, pulled them down on a
co-worker's page, and validated it's not working on his computer
either.
Update
This isn't an override issue. We've even reduced/stripped out all other css files and the problem persists.
This isn't a specificity issue with complex selectors. Almost every selector is single-tier/level (see examples).
This isn't a browser issue. It does not work in Chrome or Firefox (although, of course, those two pages render slightly different).
I had originally cut/paste from jsfiddle, so I thought it might be a cut/paste issue. It's not--we we-wrote the classes by hand with no fix.
It's not a spelling issue, we've tested it by replacing '.admItem' with '.georgeItem' and cut/paste that into the correct place, didn't fix it.
Again, it's seeing OTHER content from the file, just not THIS content.
We stripped the whole css file empty, just left one class, it still didn't pick it up.
I put embedded CSS into the head of the HTML file, it is not picking that up either, for this one class, but it IS picking up other values we put there (e.g. body text transform: uppercase).
We can click through developer tools and see the correct css file, with the correct current changes so it shouldn't be a pointer/syntax issue--it sees the file is there, and picks SOME values from it, not others.
A few screenshots:
Chrome Developer Tools
The Embedded CSS
Here is the css file in its entirety.
.georgeItem {
text-transform:lowercase!important;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.heading {
font-weight: 700;
padding: 10px 0px;
}
h1 {
font-weight: 700;
padding: 10px 0px;
text-transform: uppercase;
font-size: 15px;
font-size: 1.5rem;
margin: 0 0 5px 0;
}
h2 {
font-weight: 700;
padding: 10px 0px;
font-size: 14px;
font-size: 1.4rem;
}
h3 {
font-weight: 700;
padding: 10px 0px;
font-size: 13px;
font-size: 1.3rem;
}
h4 {
font-weight: 700;
padding: 10px 0px;
font-size: 12px;
font-size: 1.2rem;
}
h5 {
font-weight: 700;
padding: 10px 0px;
font-size: 11px;
font-size: 1.1rem;
color: #4c7a87;
}
h6 {
font-weight: 700;
padding: 10px 0px;
font-size: 10px;
font-size: 1rem;
color: #66909c;
}
p {
font-size: 10px;
font-size: 1rem;
padding: 0 0 5px 0;
color: #515151;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
pre em {
font-style: italic;
color: #686667;
}
.inquiryPrint {
font-family: 'Trebuchet MS',Helvetica,sans-serif;
font-size: 10px;
font-size: 1rem;
}
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
/* Black prints faster: h5bp.com/s */
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
table {
border-collapse: collapse;
}
thead {
display: table-header-group;
}
/* h5bp.com/t */
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
size: landscape;/*does not work in some browsers like chrome */
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.inquiryPrint table {
width: 100%;
background-color: #ffffff;
}
.inquiryPrint tr,
.inquiryPrint thead tr,
.inquiryPrint tbody tr,
tr,
th,
td {
page-break-inside: avoid;
}
.inquiryPrint tr th,
.inquiryPrint thead tr th {
border-bottom: 2px solid #c0c0c0;
padding: 5px;
}
.inquiryPrint tr,
.inquiryPrint tbody tr {
border-bottom: 1px dashed #c0c0c0;
vertical-align: top;
}
.inquiryPrint tr:last-child,
.inquiryPrint tbody tr:last-child {
border-bottom: none;
}
.inquiryPrint tr td {
padding: 5px 10px 10px 2px;
text-align: center;
}
.inquiryPrint tr td,
.inquiryPrint tbody tr td {
text-align: center;
}
.inquiryPrint tr td.right,
.inquiryPrint tr th.right,
.inquiryPrint tbody tr td.right,
.inquiryPrint thead tr th.right {
text-align: right;
}
.inquiryPrint tr td.left,
.inquiryPrint tr th.left,
.inquiryPrint tbody tr td.left,
.inquiryPrint thead tr th.left {
text-align: left;
}
/*.inquiryPrint tr td.totalRow,
.inquiryPrint tbody tr td.totalRow {
text-align: right;
font-weight: 700;
font-size: 10px;
font-size: 1rem;
}*/
/* supports 15 character value with padding */
.inquiryPrint .wide15 {
width: 100px;
}
/* supports 30 character value with padding */
.inquiryPrint .wide30 {
width: 200px;
}
/* trying to insert code conversion to flexbox for printing clinical order only */
.head {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
border-bottom:1px solid black;
padding-bottom:5px;
margin-bottom:10px;
}
.value {
display:-webkit-inline-flex;
}
.row {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.head .row {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
}
.admLabel,.label,.label_left {
text-align:left;
font-family:Arial;
font-weight:700;
font-size:1em;
margin-right:3px;
}
.row.pushRight {
text-align:right;
-webkit-flex-direction:row;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.admPatientDetails .row {
margin-top:20px;
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:space-between;
}
.clinicalOrderLineAdministrationDetails table {
width:100%;
border-collapse:collapse;
}
.clinicalOrderLineAdministrationDetails table tbody tr {
border-bottom:1px dotted #818181;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
We found the issue last night. The way we were dynamically generating the page in javascript, there wasn't a doctype declaration at the top of the page. Once we added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Everything worked fine. Sigh.
the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
That sounds as if the other stylesheets, that are not targeted at any medium specifically, override the rules you have in your print stylesheet by using more specific selectors.
Using a tool like Firebug you'll be able to see which CSS rules are being applied and why they're overriding other styles.
As CBroe states, it's quite likely that CSS styles with more specific selectors are overriding your stylesheet. Clearly your stylesheet is being read, so that's not the issue.