I thought it would be fun to check Sproutcore out, but I ran into an error which I cannot seem to figure out. I'm following the recent NetTuts+ tutorial on writing a microblog with the framework. My code is the following:
Microblog.mainPage = SC.Page.design({
mainPane: SC.MainPane.design({
childViews: 'topView postView contentView'.w(),
topView: SC.ToolbarView.design({
childViews: 'appName'.w(),
layout: { top: 0, left: 0, right: 0, height: 40 },
anchorLocation: SC.ANCHOR_TOP,
appName: SC.LabelView.design({
layout: { top: 5, left: 5, width: 100 },
displayValue: "MicroBlog App",
layerId: "mb-logo" // html id attribute
})
}),
postView: SC.View.design({
childViews: 'form'.w(),
layout: { top: 40, height: 75 },
backgroundColor: 'white',
form: SC.View.design({
childViews: 'postContent post'.w(),
layout: { left: 200, right: 200 },
postContent: SC.TextFieldView.design({
layout: { top: 10, left: 10, right: 10, height: 60 },
isTextArea: YES,
hint: "What's on your mind?"
}),
post: SC.ButtonView.design({
layout: { top: 80, right: 10, width: 100 },
title: "Post",
isDefault: YES
})
})
}),
contentView: SC.ScrollView.design({
hasHorizontalScroller: NO,
layout: { top: 135, bottom: 0, left: 0, right: 0 },
contentView: SC.ListView.design({
})
})
})
});
However, for some reason it doesn't load the button and when I click on the page where either my buttonView or contentView goes, I get the following error in my console:
Uncaught TypeError: Cannot call method 'get' of null
I tried googling for it, but no luck. I'm using Sproutcore 1.6.
Thanks
The NetTuts sproutcore app is built on sproutcore 1.4
Sproutcore changes quite significantly between versions. I would assume this is your problem.
Apparently the problem lies in the last part:
contentView: SC.ScrollView.design({
hasHorizontalScroller: NO,
layout: { top: 135, bottom: 0, left: 0, right: 0 },
contentView: SC.ListView.design({
})
})
For some reason, those two views can't have the same name. I changed this to:
contentView: SC.ScrollView.design({
childViews: 'contentListView'.w(), // do i need this here?
hasHorizontalScroller: NO,
layout: { top: 150, bottom: 0, left: 0, right: 0 },
contentListView: SC.ListView.design({
})
})
Seems to work fine now!
You've already solved this problem, but: The error "Cannot call method 'get' of null" in SproutCore is pretty unhelpful on its face, but it usually means there's either a syntax error in the code, or something else is missing in the declaration of, the object you're trying to call get() on. In your case, I think adding the childViews attribute helped, and disambiguating the contentView label was also necessary.
Related
I have used jspdf-html2canvas package in Angular 10 project for PDF download. Post deployment in safari browser the downloaded pdf bold font is not rendering proper. Also some of the pages shows alignment issues. Same code is working fine on local.
Package link: [https://www.npmjs.com/package/jspdf-html2canvas]
Issues:
Bold text is overlapping
text displayed with strong tag are not aligned
Error image reference
Below is the configuration I have used.
const opt = {
jsPDF: {
unit: 'px',
format: 'a4',
},
html2canvas: {
imageTimeout: 15000,
logging: true,
useCORS: true,
allowTaint: true,
quality: 2,
scale: 5,
},
imageType: 'image/jpeg',
imageQuality: 1,
margin: {
top: 50,
right: 20,
bottom: 32,
left: 20,
},
output: 'pdfFileName',
init: function () { }
}
I use jsPDF to generate PDF but somehow, the margin that I've set on it seems not working for pagesplit.
I tried this method but not working as well (when it comes to second page, the margin is not working): Jspdf addHTML pagesplit option is stretching the pages
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.internal.scaleFactor = 2.25;
pdf.addHTML(document.querySelector('#print'), 0, 0, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
*tried this method too:
pdf.addHTML(document.querySelector('#print'), 25, 50, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
Below is the result:
The text of a column in my table is required to render as HTML but the table can't render it, the following code is the way I'm generating the PDF:
var doc = new jsPDF({ format: 'a4', unit: 'px' });
doc.setFontSize(10);
var alignOption: any = { align: 'left' };
if (company) doc.text(`Company: ${company}`, 10, 15, alignOption);
if (division) doc.text(`Division: ${division}`, 10, 30, alignOption);
autoTable(doc, {
styles: { fontSize: 5 },
columnStyles: { 5: { cellWidth: 200 } },
margin: { top: 40, bottom: 40 },
head: [Object.keys(data[0])],
body: formatedData,
foot: [['total', '500']],
});
doc.save('hourlyReport.pdf');
The following image is the result I get:
Is there a way I can render the marked information as HTML?
So there is this known issue with modal on iOS, when the modal is enabled swiping up/down will scroll the body instead of the modal.
Using bootstrap 3.3.7
Tried to google it, most suggested adding
body.modal-open {
overflow: hidden !important;
}
but it doesn't work.
Some suggested,
body.modal-open {
position: fixed;
}
But background will jump to the top of the page.
So for now I am using,
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
#exampleModal {
background: black;
}
As a work-around so the jump can't be seen(but still noticeable)
Is there other solutions to this?
This is the site i am working on http://www.einproductions.com/
I've taken the solutions of #Aditya Prasanthi and #JIm, since one fixes the background-scrolling and the other fixes the skip-to-the-top after closing the modal, and turned them into one bare-minimum JS script:
let previousScrollY = 0;
$(document).on('show.bs.modal', () => {
previousScrollY = window.scrollY;
$('html').addClass('modal-open').css({
marginTop: -previousScrollY,
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'fixed',
});
}).on('hidden.bs.modal', () => {
$('html').removeClass('modal-open').css({
marginTop: 0,
overflow: 'visible',
left: 'auto',
right: 'auto',
top: 'auto',
bottom: 'auto',
position: 'static',
});
window.scrollTo(0, previousScrollY);
});
It's, of course, possible and even adviced to use a class to set and unset the CSS for the body, however, I choose this solution to resolve a problem just in one place (and not require external CSS as well).
refer to Does overflow:hidden applied to <body> work on iPhone Safari?
Added .freezePage to html and body when modal is showing
$('.modal').on('shown.bs.modal', function (e) {
$('html').addClass('freezePage');
$('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal', function (e) {
$('html').removeClass('freezePage');
$('body').removeClass('freezePage');
});
the CSS
.freezePage{
overflow: hidden;
height: 100%;
position: relative;
}
My solution:
scrollPos = window.scrollY - get current scroll position.
body { position: fixed;
margin-top: -**scrollPos** px);
}
Then modal is closed:
body {position: "";
margin-top: "";
}
and return scroll position to point before opened modal window:
window.scrollTo(0, scrollPos);
None of the above answers worked for me, the modal kept disappearing and I ended up with a brute force approach which is ugly and inefficient but works !
$('body').on('touchstart touchmove touchend', e => {
let scrollDisabled=$('.scroll-disable');
if (scrollDisabled.length > 0 && scrollDisabled.has($(e.target)).length===0) {
e.preventDefault();
e.stopPropagation();
}
});
setInterval(() => $('.modal:visible').css('top', '20px'), 100);
$(document).on({
'show.bs.modal': e => $(e.target).addClass('scroll-disable'),
'hidden.bs.modal': e => $(e.target).removeClass('scroll-disable')
}, '.modal');
Import this file and use the enableBodyScroll and disableBodyScroll functions to lock and unlock the body scroll.
using css top property will exactly navigate back to the previous position. It eliminate the drawback of dealing with the floating point margin.
const toggleBodyScroll = (position, initialMargin) => {
document.body.style.position = position;
document.body.style.top = initialMargin;
};
const getScrolledPosition = () => {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
};
const scrollToPrevPosition = (scrolledPosition) => {
window.scrollTo(0, scrolledPosition);
};
const getWindowTop = () => {
return window.getComputedStyle(document.body).getPropertyValue('top');
};
export const disableBodyScroll = () => {
toggleBodyScroll('fixed', `-${getScrolledPosition()}px`);
};
export const enableBodyScroll = () => {
const scrollPosition = 0 - parseInt(getWindowTop());
toggleBodyScroll('static', 0);
scrollToPrevPosition(scrollPosition);
};
This will prevent page scrolling while Modal is opened on iOS mobile
if ($(window).width() < 960) {
let previousScrollY = 0;
$(document).on('show.bs.modal', () => {
previousScrollY = window.scrollY;
$('html').addClass('modal-open').css({
marginTop: -previousScrollY,
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'fixed',
});
}).on('hidden.bs.modal', () => {
$('html').removeClass('modal-open').css({
marginTop: 0,
overflow: 'visible',
left: 'auto',
right: 'auto',
top: 'auto',
bottom: 'auto',
position: 'static',
});
window.scrollTo(0, previousScrollY);
});
}
How do I offset the title control in titanium?
Right now I am trying to put a left: -100 property on the label that is in the title control and that works for when you open up the view but then it moves back into the center.
Are there any suggestions on how I can achieve this move over?
Thanks in advance!
var txtSearch = Titanium.UI.createTextField({
hintText: 'Keyword to search for',
height: 'auto',
width: 220,
left: -100,
font: {fontSize: 12},
enabled: true,
keyboardType:Titanium.UI.KEYBOARD_EMAIL,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ONFOCUS
});
win.setTitleControl(txtSearch);
var btnSearch = Titanium.UI.createButton({
title: 'Search',
height: 'auto',
width: 'auto',
font: {fontSize: 13}
});
win.rightNavButton = btnSearch;
If I click the search button and it brings me to the search results page and then I hit the back button the textbox is not moved over and looks fine.. Only when the page first loads
Try adding the text field to a view, then setting the view as the title control:
var container = Ti.UI.createView({
width: 320
});
var txtSearch = Titanium.UI.createTextField({
hintText: 'Keyword to search for',
height: 'auto',
width: 220,
left: 0,
font: {fontSize: 12},
enabled: true,
keyboardType:Titanium.UI.KEYBOARD_EMAIL,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ONFOCUS
});
container.add(txtSearch);
win.setTitleControl(container);