Node.JS Vash TypeError: while rendering template object is not a function - node.js

There is another thread that covers this, but I am not allowed to post to it. Also, the only answer does not seem to solve my problem.
I am getting the Object not a function error when using the #html.extend() method. I have read all of the very limited threads on this topic. They all say the same thing. That I need to ensure the path is correct to the layout.vash file I am extending. My declaration looks like this in the file that I want to want to extend with my layout.vash file.
#html.extend('layout', function (model) {
.... do stuff ...
})
What is odd, is that some pages work fine others don't. The path is correct. I am sure of this because of the fact the files in the same director exhibit different behavior.
Does anyone know what other mistake I could be making to cause this error?

In my case, vash was unable to parse the content within ...
I pulled it out from the layout page and created a separate .css file, and the annoying "object is not a function" error disappeared.
I speculate that vash collides with some css syntax.
For you info, my style statements that caused the trouble were these.
<style type="text/css">
*{padding:0;margin:0;}
html{border-top:10px #1abf89 solid;}
body{width:800px;margin:0 auto;padding:5% 20px 20px;font-family:Palatino, Optima, Georgia, serif;}
#media all and (max-width:1024px){ body, pre a{width:60%;} }
small{color:#999;}
#toolbar{margin-bottom:1em;position:fixed;left:20px;margin-top:5px;}
#toolbar [class^="icon-"]:before, #toolbar [class*=" icon-"]:before{font-family:'pen'}
#mode{color:#1abf89;;cursor:pointer;}
#mode.disabled{color:#666;}
#mode:before{content: '\e813';}
#hinted{color:#1abf89;cursor:pointer;}
#hinted.disabled{color:#666;}
#hinted:before{content: '\e816';}
#fork{position:fixed;right:0;top:0;}
/*
When the webpage is printed
this media query hides extra elements,
and makes the text content fit the page.
*/
#media print {
#fork, #toolbar {
display: none;
}
body {
width: 94%;
padding-top: 1em;
font-size: 12px;
}
html {
border-top: 0;
}
}
</style>

Related

Active Reports 6 PdfExport.Export() method throws ArgumentOutOfRangeException after Windows 10 Creators Update

Problem
I have some code that uses Active Reports 6's PdfExport class to generate a PDF report. I'm running this code on a Windows 10 machine. After the Creators update, the code started throwing an ArgumentOutOfRangeException.
The code worked fine when it was run on Windows Server, just not on my Windows 10 machine.
Also, I tried switching to the XlsExport class, and the report worked fine.
Code
public static void ExportPDF(ActiveReport report, Stream stream)
{
try
{
report.Run();
using (PdfExport pdf = new PdfExport())
{
// exception occurs here
pdf.Export(report.Document, stream);
}
}
catch (Exception)
{
throw;
}
}
Error details
ArgumentOutOfRangeException
Message
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
Stacktrace
at System.ThrowHelper.ThrowArgumentOutOfRangeException(ExceptionArgument argument, ExceptionResource resource)
at System.Collections.Generic.List`1.get_Item(Int32 index)
at #mqc.#Vqc.#RZc(Int32 fontIndex, String fontName, FontStyle fontStyle, Single sizeInPoints, Boolean vertical)
at DataDynamics.ActiveReports.Export.Pdf.PdfExport.#7pk(Document document, Stream stream, String pageRange)
at DataDynamics.ActiveReports.Export.Pdf.PdfExport.Export(Document document, Stream stream, String pageRange)
at DataDynamics.ActiveReports.Export.Pdf.PdfExport.Export(Document document, Stream stream)
...
After reading this post on the Active Reports support forum, and some some trial and error, I discovered a fix.
Solution
Open up the report designer file code behind. In my case, it was in the file SomeReport.rpx.vb.
Locate the designer generated code region:
#Region "ActiveReports Designer generated code"
Public WithEvents Detail1 As DataDynamics.ActiveReports.Detail
Friend WithEvents ReportHeader1 As DataDynamics.ActiveReports.ReportHeader
Friend WithEvents ReportFooter1 As DataDynamics.ActiveReports.ReportFooter
....
1. Style declarations require font-family
Inside that region of code, look for instances of Style properties:
Me.Label2.Style = "font-family: Arial; color: Black; font-size: 10pt; font-weight: bold; text-align: right; ddo-char-set: 1"
You need to make sure every Style property includes a font-family. Go through your code and fix any that are missing.
2. StyleSheet declarations also require font-family
Also look for instances of code like this, and make sure they also have a font-family defined.
Me.StyleSheet.Add(New DDCssLib.StyleSheetRule("font-family: Times New Roman; font-style: inherit; font-variant: inherit; font-weight: bold; font-size: 16pt; font-size-adjust: inherit; font-stretch: inherit", "Heading1"))
3. Look out for font-family: inherit
You need to explicitly define the font-family, if you see font-family: inherit anywhere in the designed code, replace it with a font name.
Conclusion
Once you've added all the missing font-family , your report should work.

Display: Inline block - What is that space? [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
Inline blocks have this weird space in-between them. I could live with it, up to a point where, if I load more content with an AJAX call, the tiny space goes away. I know I'm missing something here.
div {
width: 100px;
height: auto;
border: 1px solid red;
outline: 1px solid blue;
margin: 0;
padding: 0;
display: inline-block;
}
http://jsfiddle.net/AWMMT/
How to make the spacing consistent in Inline blocks?
The space is in the HTML. There are several possible solutions. From best to worst:
Remove the actual space in the HTML (ideally your server could do this for you when the file is served, or at least your input template could be spaced appropriately) http://jsfiddle.net/AWMMT/2/
Use float: left instead of display: inline-block, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/
Set the container's font-size to 0 and set an appropriate font-size for the internal elements: http://jsfiddle.net/AWMMT/4/ -- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)
http://jsfiddle.net/AWMMT/1/
<div>...</div><div>...</div>
^
|--- no whitespace/new line here.
Your spaces were the new lines the browser converted to "spaces" when displaying it.
Or you could try to hack a bit with CSS:
A flexbox conveniently ignores whitespace between its child elements and will display similarly to consecutive inline-block elements.
http://jsfiddle.net/AWMMT/470/
body { display: flex; flex-wrap: wrap; align-items: end; }
Old answer (still applies to older, pre-flexbox browsers)
http://jsfiddle.net/AWMMT/6/
body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }
There’s actually a really simple way to remove whitespace from inline-block that’s both easy and semantic. It’s called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:
#font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Suit to taste. Here’s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css #font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.
You can comment the whitespace out.
Original answer from 2013
Like:
<span>Text</span><!--
--><span>Text 2</span>
Edit 2016:
I also like the following method, where you just put the closing bracket right before the following element.
<span>Text</span
><span>Text 2</span>
Also you can do it like this (which IMHO,I believe is sintatically correct)
<div class="div1">...</div>
<div class="div1">...</div>
.
.
.div1{
display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }

ofbiz theme layout: Re-order main screen components

I'm trying to change places of ofbiz components like application bar and main container places, I know that maybe can be changes from /common/widget/CommonScreens.xml or something like that (such as another xml file), I tired without luck to find what the file responsible to render "app-navigation" and just I lost my way.
So I hope find my answer here, I want to change layout,
The default interface is look like this:
What I want is (I made this using firebug) :
How I can do that?? or in another word from where I can start to do that?
leave the CSS and HTML side for me, I just want the point to start with, to edit theme layout to be like what I explained in previous screenshot.
Sorry If I cant give you what I want clearly my English didn't help me today :) but you can ask me in comment about anything if not clear yet.
take a look at the other themes in OFBiz. The bizness_time theme is already using a similar layout.
Cheers
I solved my issue, there was a little mistake from my side, and I did some modification;
In CSS file:
#app-navigation {
...
/* border-top: 0.1em solid #3E5A71; */ /*Removed*/
...
width: 200px; /*Added*/
float: left; /*Added*/
}
...
#app-navigation ul li ul li {
...
/* float: left;
display: inline; */ /*Removed*/
...
}
/*Added*/
#container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
In templates :
At appbar.ftl , or appbarOpen.ftl :
<div id="container"> <!-- This is the Line that I Added -->
<#if userLogin?has_content>
...
And in footer.ftl :
</div> <!-- This is the Line that I Added -->
<div id="footer">
...
Simply :)

Nested mixins in LESS throws an error

I'm trying to have a .flexbox mixin that accepts an argument #orient, which should automatically apply box-orient as well. When using it in combination with !important, I'm experiencing an error that is also reproducible with a more narrowed-down testcase:
.foo() {
.bar;
}
.bar {
color: red;
}
body {
.foo() !important;
}
This makes LESS throw an error (I'm using it in node.js):
C:\...\node_modules\less\lib\less\parser.js:385
throw new(LessError)(e, env);
^
TypeError: Cannot call method 'charAt' of undefined
Oddly enough, using .foo instead of .foo() works as expected:
.foo {
.bar;
}
.bar {
color: red;
}
body {
.foo !important;
}
What am I doing wrong?
A quick search led me to this bugreport. It is a known issue.
https://github.com/cloudhead/less.js/issues/740
To be honest I would suggest you try to accomplish what you're trying to do some other way. The less.js backlog is at time of this writing 417 issues large. It isn't likely going to be fixed any time soon.
(yes it is this bugreport, you created a nested rule by extending .foo with .bar)

Isolating CSS for Chrome extension

I'm building a Chrome extension that does some UI injection using content scripts. The problem is that since every website is different and may try to screw around with the default positioning of certain elements (divs, lists) etc, my ui looks different depending on which page it is being used.
I've tried using YUI reset v3 and that helped but didn't remove all the weirdness. Does anybody know of an even more aggressive reset method that does more than just clearing margin/padding and reset text sizes?
Thanks in advance.
We've had a similar issue, we've tried CSS resets and also using specific id tags for the elements and CSS rules, but it was never robust enough...
The best solution was to inject the elements into the DOM as Shadow DOM elements that contain the style inline. You can read your CSS file via AJAX requests and inject them to the Shadow DOM dynamically, just make sure that they are within the web_accessible_resources files (you can use a wildcard to your CSS folder).
In case that you are not familiar with Shadow DOM, here is a good example of how it works. It might take a bit of re-factoring on your end, but it's really the only solution that works a 100%.
I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.
Take creating a dialog for example. After installing Boundary, you can do this in your content script
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// find() function returns a regular jQuery DOM element
// so you can do whatever you want with it.
// some js after button is clicked.
});
Elements within #yourDialogID will not be affected by the existing webpage.
Hope this helps. Please let me know if you have any question.
https://github.com/liviavinci/Boundary
meyerweb's reset styles look slightly more aggressive.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
That is why you should inject at document_end. You can do that by setting "run_at": "document_end" in the Content Script Manifest

Resources