I have a strange issue that is happening on one of my projects (but not other projects) and I can't see anyone else having anything remotely similar. (I apologise in advance for lack of proper examples as this is actual company code).
The problem I have is in a .NET Core 2 project I am trying to use nodejs to create a PDF (like I have in a second project). However, the PDF only generates properly when the Visual Studio (2017) debugger is attached.
try
{
var result = await nodeServices.InvokeAsync<byte[]>(pdfSettings, viewWithAbsoluteLinks);
string invoicePath = _configuration.GetSection("AppSettings")["InvoicePath"];
string filename = Path.Combine(invoicePath, "invoice.pdf");
FileUtils.WriteToFile(filename, result);
return Json(new { success = true, size = result.Count(), viewAsHtml, viewWithAbsoluteLinks, environment, pdfSettings, result });
}
catch
{
return Json(new { success = false });
}
I am using jsrender with phantom-pdf, and when I attach the debugger in Visual Studio result is 69318. However, when I run without the debugger attached result = 66167 bytes.
To debug I returned the variable viewWithAbsoluteLinks so I could see if there was any difference, and in both cases that variable is the same.
viewWithAbsoluteLinks is:
<html>
<head>
<style>
.pdf-hidden {
display: none;
}
.pdf-visible {
display: block !important;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Invoice</title>
<link rel="stylesheet" href="http://localhost:10795/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost:10795/css/site.css">
<link rel="stylesheet" href="http://localhost:10795/css/site.theme.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
<link rel="stylesheet" href="http://localhost:10795/lib/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
<style>
body {
font-family: "DIN 2014 Light", 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #000;
}
</style>
</head>
<body>
<div class="pull-right" style="border: 1px solid #0f0">
<img src="http://localhost:10795/images/training-logo.png">
</div>
<div style="padding-top: 50px;">
<table style="width: 100%; border: 1px solid #000">
<tbody>
<tr>
<td style="border: 1px solid #f00"> Address </td>
<td> Invoice </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"> window.JSREPORT_READY_TO_START = true; </script>
</body>
</html>
When the debugger is attached the text within the tags shows in the PDF. When the debugger is not attached the text does not appear. (The s have different colour borders - and the colours display properly)
I am assuming running when debugging is altering something, but I'm not sure what. I thought at first it was just that CSS was making the text white, but the file sizes suggest the text really isn't there.
Does anyone have any ideas what Visual Studio may be doing to make it work properly when the debugger is attached?
After struggling for a while I may have just solved the issue. Timing.
Event though the debugger was attached (no breakpoints, just attached) it's possible that this caused a small delay just long enough for the PDF to be generated.
A quick look on SO and I found this: How to set time delay in javascript
I added a delay of 1 second and it generated the PDF with text correctly without the debugger being attached.
Related
I need to use the same code for my mobile site as my desktop site (below). How can I enlarge my mobile site's text size so it looks the same as my desktop site?
This is my header info and title:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Title</title>
This is my Cascading Style Sheet data:
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
img {
height: auto;
max-width: 100%;
object-fit: contain;
}
table {table-layout: fixed; width: 100%;}
td {word-wrap: break-word;}
-->
</style>
</head>
This is my cream background colour:
<body style="background-color: rgb(255, 239, 227);">
This is the content of my site, where I would insert text between the <p> and </p> tags:
<div style="text-align: center;">
<table width="80%">
<tbody>
<tr>
<td>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>
Insert the following code before the </head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This makes the text size appear the same size as your desktop site.
I was trying to use iron-flex-layout during the development of a website and became extremely frustrated when I spent hours try to get it to work, but to no avail. Eventually, I decided to try a bare-bones web page to see if it would work (thinking that it was probably something in my website). However, I tried the following code and I still can't get it to work! Can anyone spot my errors?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
body {
font-weight: 300;
}
div {
border: 2px solid grey;
background-color: white;
}
.layout {
margin-bottom: 20px;
background-color: grey;
}
p {
margin: 5px;
}
</style>
</head>
<body fullbleed unresolved>
<div class="horizontal layout">
<div><p>div</p></div>
<div class="flex"><p>flex (horizontal layout)</p></div>
<div><p>div</p></div>
</div>
</body>
</html>
Here is what the result is supposed to look like
And here is what I am getting
If you want to use the CSS classes, you need to import them separately:
<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
The import you have only gives you access to the #apply mixins. Do note that Polymer is dropping /deep/ support in their elements and are encouraging people to use the mixins instead of the classes: https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
I'm unable to get a dojo example listed under dojo's official documentation to work.
When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:
Error: Tried to register widget with id==borderContainerThree but that
id is already registered
This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work.
I've copied their code verbatim from the web page.
The example is given on the page:
http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html
and is titled:
"BorderContainer Inside A Dijit Template"
A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line,
the error disappears, but there is no content displayed on the web page.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide</title>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
<script type="text/javascript">
dojoConfig = {
async: true
};
</script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>
</head>
<body class="claro" >
My Test
<script type="text/javascript">
require([
"dojo/parser",
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"
], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("MyDijit",
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// Note: string would come from dojo/text! plugin in a 'proper' dijit
templateString: '<div style="width: 100%; height: 100%;">' +
'<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
' style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
'<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
'<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
' <div data-dojo-type="dijit/form/Button">A Button</div>' +
'</div>' +
'</div></div>'
});
parser.parse();
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
<script type="dojo/on" data-dojo-event="click">
require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
// Create a new instance
var newdijit = new MyDijit({}, domConstruct.create('div'));
newdijit.placeAt(dom.byId('mydijitDestination'));
newdijit.startup();
});
</script>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br />
This is my content.<br />
There is much like it,<br />
but this is mine.<br />
My content is my best friend.<br />
It is my life.<br />
I must master it,<br />
as I must master my life.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
<div id="mydijitDestination" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
Any suggestions given as to what I'm doing wrong would be greatly appreciated.
The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.
I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:
#borderContainerThree {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/
I'm looking to make an image sprite fade in after a certain amount of time. (please see code below)
The image sprite has CSS attributes such as hover, active, href.
Then I added jquery src and code. The sprite hover, active, href work, but the jquery delay does not.
How do I make all of these work together?
Thanks for any help you can give!
K
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style type="text/css">
html, body {margin:0px;}
a.LaunchCourse {
background: url(images/LaunchCourse.png) no-repeat 0 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 188px;
height: 60px;
}
a.LaunchCourse:hover{
background-position: 0px -60px;
}
a.LaunchCourse:active{
background-position: 0px -120px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.LaunchCourse').delay(1500).fadeIn(1500);
});
</script>
</head>
<body>
<a class="LaunchCourse" href="wbt.htm" ></a>
</body>
</html>
I think what you might want to try is putting this:
$('.LaunchCourse').hide();
setTimeout(showImage, 5000);
function showImage() {
$('.LaunchCourse').fadeIn(1000);
}
instead of this:
$('.LaunchCourse').delay(1500).fadeIn(1500);
That way, you start by hiding the image... and then you just fade in with however much delay you want in that fadeIn(number) part.
Why not use javascript's setTimeout function?
I'm trying to set the size of a dijit.Dialog, but it seems limited to 600x400, no matter what size I set it. I've copied the code from dojocampus and the dialog appear, but when i set the size larger, it only shows 600x400. Using firebug and selecting items inside the dialog, I see that they are larger than the dialog, but don't show correctly. I set it up to scroll, but the bottom of the scrollbar is out of view. In firebug, I've check the maxSize from _Widget and it is set to infinity. Here is my code to set the dialog.
<div id="sized" dojoType="dijit.Dialog" title="My scrolling dialog">
<div style="width: 580px; height: 600px; overflow: scroll;">
Any suggestions for sizing the dialog box larger?
I just coded up a quick sample from scratch using dojo 1.4 and was able to set an arbitrarily large DBX size with no problems.
Without seeing your code it might be hard to find where your issue is stemming from but it does not seem to be an inherent limitation of the dojo toolkit. Perhaps you have some CSS rules that are inherited in a way you did not anticipate?
Perhaps you can use my sample below to compare with your use case and figure out what is different about your implementation.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
djConfig = {
parseOnLoad: true
};
google.load("dojo", "1.4");
google.setOnLoadCallback(function (){
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
});
</script>
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css";
</style>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" type="button">Show big Dialog
<script type="dojo/method" event="onClick" args="evt">
dijit.byId("bigdbx").show();
</script>
</button>
<div id="bigdbx" dojoType="dijit.Dialog" title="Big Dialog" width="900px">
<p style="width: 1100px; height: 800px;">Paragraph with really wide fixed size...</p>
</div>
</body>
</html>