After upgrading Angular version 12 to 13, typescript version is also updated to 4.6.4,
In typescipt 4.x version ClientRect is depercated and in our code we are using clientrect for
contextmenu that is supported in angular 12 . In angular 13 our code is not working for ngx-
contextmenu.
Below code is used in application :
const offset = this.getOffset(this.divElement.nativeElement);
const anchorElement: any = {};
anchorElement.getBoundingClientRect = () : ClientRect=> ({
bottom: offset.top + $event.clientY,
height: 0,
left: offset.left + $event.clientX,
right: offset.left + $event.clientX,
top: offset.top + $event.clientY,
width: 0
});
Tried : In above code clientRect is deprecated , so we removed clientRect from code :
now the code is fine , but after doing right click for context menu below issue is coming in
console.
issue : ngx-contextmenu - this.overlay.position(...) connectedTo is not a function
Related
I am using ionic modal in ionic project. the modal is appearing on page clearly, but when I am trying to enter any text into any textbox the keyboard is appearing on page.
Once the keyboard appeared, I am unable to see the html of modal and also unable to scroll modal.
kindly refer the screenshot.
Thank you.
Waited for long time and did't get any answer, So I have written some css to fix this issue, This is working in my project as well as dominik
also tried this. see the comment by him
#media(min-width: 680px){
.modal{ top: 0; height: 70%; }
body.keyboard-open.modal{ height: 90%; }
body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
overflow-y: scroll;
height: 100% !important;
top: 0;
}
Had to come up with this fix. it worked for me, so give it a try: Put the code in your app.run
NOTE: this issue is normally caused when you set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml
Make sure jquery is included in your app.
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
setTimeout(function() {
var originalHeight = window.innerHeight-30;
var newHeight = originalHeight - e.keyboardHeight;
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
function keyboardHideHandler(e){
setTimeout(function() {
var newHeight = '100%';
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
I have a one page application in angular.
To create a PDF page from the HTML content I using jsPDF library.
In the index page there is a function that create PDF from this div:
(notice, this is a ng-view div)
The div
<div id="doPDF" ng-view></div>
But it is not successful.
the error
TypeError: undefined is not a function
The Js code
$scope.createPDF=function(){
var pdf = new jsPDF('p','pt','a4')
, source = $('#doPdf')[0]
, specialElementHandlers = {
'#aaa': function(element, renderer){
return true
}
}
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
)
}
(In other div-s the DPF generator function work without problem.)
What can I do to generate PDF page from ng-view?
(I want one function that work from the index page and take the content from the ng-view.)
I m trying to use the cancel feature of angularJS's $animate : https://docs.angularjs.org/api/ngAnimate/service/$animate with the latest stable version: 1.3.2
But either I have failed to understand what it is supposed to do or it does not have the expected behavior:
I have a custom animation as such:
var animationPromise = $animate.addClass(element, 'move-items-animation', {
from: {
position: 'absolute',
},
to: {
left : item.x + 'px',
top : item.y + 'px'
}
}).then(function(){
element.classList.remove('move-items-animation');
});
$timeout(function(){
$animate.cancel(animationPromise); //promise.$$cancelFn is not a function`
}, 300);
So a basic CSS transform. In addition to this I have the following CSS transition:
.move-items-animation-add-active{
transition: 1s ease-in-out;
}
So first weird behavior: I get the error promise.$$cancelFn is not a function coming from https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233
See fiddle: http://jsfiddle.net/q1L9ycsd/6/
So I changed slightly the code :
var animationPromise = $animate.addClass(element, 'move-items-animation', {
from: {
position: 'absolute',
},
to: {
left : item.x + 'px',
top : item.y + 'px'
}
});
animationPromise.then(function(){
// After canceling this is executed
element.classList.remove('move-items-animation');
});
$timeout(function(){
$animate.cancel(animationPromise); // The animation goes on
}, 300);
So now I don't have that error but the animation is not stopped but the callback from the animation is executed. Does this mean that I have to manually stop the animation there?
See fiddle: http://jsfiddle.net/524nfp0o/2/
I have also try to cancel the animation in a separate event with the same result, see fiddle: http://jsfiddle.net/0o24zw02/
So
1. Why the error in the first fiddle?
2. How to actually stop an animation?
Thanks!
It works in 1.4, I'm not seeing it documented in 1.3 $animate:
Not documented: https://code.angularjs.org/1.3.20/docs/api/ng/service/$animate
Documented: https://code.angularjs.org/1.4.0/docs/api/ng/service/$animate
I was actually having this issue with your library and your result is the only one :)
I am new to Titanium and I am using alloy.
I developed an app that renders correctly on the emulator with resolution 1200x1920 (Android Nexus 7 Emulator), however the same code when rendered in 768x1280 emulator screen, all my controls are scattered and are not aligned anymore. How can I make the app respond relative to the screen resolution.
(FYI : Genymotion is not working as it shows issues with updating video driver, I will check that later).
My code is like this :
var LeftTopView = Ti.UI.createView({
top:'0%',
left:'0%',
height : '30%',
width : '70%',
});
var chkBuy = Ti.UI.createSwitch({
id: 'chkBuy',
left: '2%',
top:'3%',
value: true,
title:'BUY',
width:'auto',
height:'auto',
color:'Black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
font:{fontFamily:'Consolas', fontSize: '23dp', fontWeight:'bold',},
});
chkBuy.addEventListener('click',chkBuyClick);
function chkBuyClick(){
chkSell.value = false;
chkBuy.value = true;;
}
var chkSell = Ti.UI.createSwitch({
id: 'chkSell',
left: '35%',
top:'3%',
value: false,
title:'SELL',
width:'auto',
height:'auto',
color:'Black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
font:{fontFamily:'Consolas', fontSize: '23dp', fontWeight:'bold',},
});
chkSell.addEventListener('click',chkSellClick);
function chkSellClick(){
chkBuy.value = false;
chkSell.value = true;
}
LeftTopView.add(chkBuy);
LeftTopView.add(chkSell);
var MainView = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
left:'0%',
top:'0%',
});
MainView.add(LeftTopView);
var window = Ti.UI.createWindow({
title:'Page2',
backgroundColor:'#000',
exitOnClose:'true',
});
window.add(MainView);
window.open();
You should not use % in giving top and bottom to the elements(It will cause trouble in orientation) instead use layout.
checkout the Documentation
I am using Ext Js for creating a map markers with infoBubble displayed on click. when i tried to add this code i got the following error : Uncaught ReferenceError: infoBubble is not defined
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
borderWidth:1,
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'example',
});
what could be the problem ?
Any help will be apreciated, thanks
Try google.maps.InfoBubble instead of InfoBubble and i also see a "," after the last attribute that must be removed