I have an app that is forced portrait in config.xml but I want a specific view in the app to be displayed as landscape. What would be the best way to achieve this? Is there an option already within the Ionic Framework?
I have tried setting the view controller to rotate the page container element by 90deg via CSS but this is a bad hack since the OS doesn't know that the device should be rotated and thus the status bar/OS nav items won't rotate.
Is there a way to force specific views to a specified orientation when using the Ionic Framework?
Seems like this plugin will help you.
For landscape, you have to use screen.lockOrientation('landscape'); in the controller.
And on other pages, if they are not in portrait view you have to put screen.lockOrientation('portrait');
for Ionic 2.x there is ionic native plugin can be used.
import { ScreenOrientation } from '#ionic-native/screen-orientation';
constructor(private screenOrientation: ScreenOrientation) { }
...
// get current
console.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape'
// set to landscape
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
// allow user rotate
this.screenOrientation.unlock();
// detect orientation changes
this.screenOrientation.onChange().subscribe(
() => {
console.log("Orientation Changed");
}
);
see here.
I'm actually doing an app for a stage, which has to be responsive design. So it has to work on Mobile, Computer and Tablet. For this app I need to use the google api Place Autocomplete. The problem with that is that it doesn't work on mobile, whether it's iOS or android... on another forum i found a piece of code which is the following, supposed to resolve this problem :
.directive('disableTap', function($timeout) {
return {
link: function() {
$timeout(function() {
// Find google places div
_.findIndex(angular.element(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
document.getElementById('autocomplete').blur();
};
});
},500);
}
};
});
The problem is that i've never used Angular JS in my life and i do'nt have the time to learn it now, maybe after i'm done with the app... and this function is supposed to make it works on mobile, but i don't know how to use it. Could you guys give me a hand and explain me how to insert this code in my project and how to use it? I'm really in need and some help would be very appreciated. by the way, i'm not english native so if you didn't udnerstand something in my post just tell i'll try to say it better ^-^
I hope you will be able to help me, thanks :)
This should be the same in jQuery, but you have to adapt it yourself. You require also the underscore.js library. Hope this helps.
window.setTimeout(function() {
// Find google places div
_.findIndex($(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
$('#autocomplete').blur();
};
});
},500);
I'm working on an angular-app and am trying to implement orientation change with matchmedia. When I first load my page I run a line of code in my controller to check wheter if i'm in landscape or not:
$scope.landscape = matchmedia.isLandscape();
This works fine. But then when I want to detect a change of orientation I use this code:
angular.element($window).bind('orientationchange', function () {
$route.reload();
});
So when the orientation changes the page gets reloaded and it will again detect the orientation. But now it gives back the opposite. So it says landscape == false when it should be true. Does anybody know why this is? Or am I using a wrong technique to deal with the orientation change? Thanks in advance!
Try:)
screen.bind('orientationchange', function () {
$route.reload();
});
You could try:
angular.element($window).bind('resize orientationchange', function (e) {
console.log('resize or orientationchange: ' + e.type);
$route.reload();
});
In Browser Simulator I get "resize" when orientation changes. But on device I get "orientationchange".
Here's an example I found online. It's not working on desktop's chrome but it's working on device's chrome:
http://codepen.io/xAlien95/pen/EaNVNW
I've created website completely in angular + famous.
In desktop it's working great. When I try to open it in safari / chrome on iPhone it's working great as well but there is one problem. Using my finger I can't move page at all, only touch event is recognized, nothing more.
This is happening also in official examples. For example examples/views/Scrollview/example.html. If I rotate my iPhone 6 Plus to landscape I can't even access the browser toolbar to close the page, I need to kill the browser and start it again.
What I am suppose to do to fix this? Why is this even happening?
The problem is that you are using Famous in appMode. Try setting the following and see if that works:
Engine.setOptions({appMode: false});
When Famous is in appMode, it will add the following snippet when the context is created:
function initialize() {
// prevent scrolling via browser
window.addEventListener('touchmove', function(event) {
event.preventDefault();
}, true);
addRootClasses();
}
This is what prevents the browser page from moving.
function initialize() {
// prevent scrolling via browser
window.addEventListener('touchmove', function(event) {
event.preventDefault();
}, true);
addRootClasses();
}
Hi I am having some trouble getting a basic protractor test to work.
My setup:
I use requirejs so I init angular using angular.bootstrap(), not the ng-app attr. According to protractor docs this is not supported out of the box, but seems to work fine for tests that don' involve clicking.
Protractor conf.json:
"use strict";
exports.config = {
specs: '../E2ETests/**/*.js',
chromeOnly: true,
getPageTimeout: 30000,
allScriptsTimeout: 30000
}
I use some third party jquery plugs which I wrap in directives, I suspect these might be part of the issue.
The test:
"use strict";
describe('When clicking should add stuff', function () {
var ptor;
beforeEach(function () {
browser.get('https://localhost/myApp');
ptor = protractor.getInstance();
});
it('add stuff', function () {
// If I comment this, the test pass.
element(by.id('add-stuff-button')).click();
// This does not matter fails on the line above..
expect(browser.getTitle()).toBeDefined();
});
});
The error:
UnknownError: unknown error: Element is not clickable at point (720, 881). Other element would receive the click: <div class="col-md-5 col-md-offset-5">...</div>
(Session info: chrome=37.0.2062.124)
(Driver info: chromedriver=2.10.267521,platform=Windows NT 6.1 SP1 x86_64)
Thoughts
The chromedriver do find the button, because if I change the id it complains that no element is found. So I think the problem is that the button moves from its initial position. As the element(***) function should wait for angular to be done, I suspect that its the third party plugins that might interfere as they might not use angular api's fetching data etc. So angular think its done but then the third party plug populates and moves stuff around.
Any ideas what to do?
If the third party plugs is the problem, can I somehow tell angular that third party stuff is going on and then later tell it when its done?
Thx
Br
Twd
You should set window size in your config file
onPrepare: function() {
browser.manage().window().setSize(1600, 1000);
}
Following worked fine for me:
browser.actions().mouseMove(element).click();
Edit: If above does not work try chaining perform() method too(I got this as an edit suggestion, I have not tested it but somebody could verify it and comment)
browser.actions().mouseMove(element).click().perform();
This happens if the chrome window is too small, try to add inside the beforeEach
browser.driver.manage().window().setSize(1280, 1024);
Or simply use the Actions class:
browser.actions().mouseMove(elem).click().perform();
Had the same issue but was not related to the window size but had to wait for ngAnimation to end.
So I had to wait until the element was clickable with.
const msg = 'Waiting for animation timeout after 1s';
const EC = new protractor.ProtractorExpectedConditions();
await browser.wait(EC.elementToBeClickable(model.elements.button.checkCompliance), 1000, `${msg} panel`);
await model.elements.button.checkCompliance.click();
#note - I am using async/await node 8 feature, you could just as well convert this to regular Promises.
Also using ProtractorExpectedConditions instead of ExpectedConditions see documentation
Maybe It is not applicable in your case, but I've encountered the same problem and based on Milena's answer I've been looking for another element obscuring my button (in my case, a dropdown menu in the top right of my screen).
It appears to be the Connected to Browser Sync notification message sent by browsersync, launched by Gulp. The message vanished after a short time, but after my onClick() call.
To remove the notification, in my gulpfile, I've added the notify: false param when initializing browsersync:
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
},
notify: false
});
I fix this problem by using browser time sleep.
browser.driver.sleep(3000)
before giving click button
You can define the desired screen resolution through your protractor configuration file (e.g. protractor.conf.js or config.js) for consistent test behavior.
For example with Chrome browser:
exports.config = {
specs: [
// ...
],
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: [
'--window-size=1600,900',
'--headless'
]
}
}
// ...
}
Explanations
window-size argument will launch Chrome with a 1600 by 900 window.
headless will launch headless Chrome, allowing you to have your tests run with the specified window size (1600 by 900) even if your screen resolution is lower than that.
You may want to have two configurations, one for developers (without headless mode) who always have a high resolution screen and one for build servers (headless mode) where screen resolution is sometimes a mystery and could be lower than what your application / test is designed for. Protractor configuration file are javascript and can be extended to avoid code duplication.
I had the same error and purely adjusting the screen size did not fix it for me.
Upon further inspection it looked as though another element was obscuring the button, hence the Selenium test failed because the button was not (and could not be) clicked. Perhaps that's why adjusting the screen size fixes it for some?
What fixed mine was removing the other element (and later adjusting the positioning of it).
This works better than specifying the window size, in case you test need to run on multiple displays.
browser.manage().window().maximize();
Other way, you can try this:
this.setScrollPage = function (element) {
function execScroll() {
return browser.executeScript('arguments[0].scrollIntoView()',
element.getWebElement())
}
browser.wait(execScroll, 5000);
element.click();
};
You could also try turning off any debug tools you might be using. I was using Laravel and debugbar and had to set APP_DEBUG to false.
From Gal Malgarit's answer,
You should set window size in your config file
onPrepare: function() {
browser.manage().window().setSize(1600, 800);
}
If it still doesn't work you should scroll to the element's location
browser.executeScript('window.scrollTo(720, 881);');
element(by.id('add-stuff-button')).click();
Note that this was sometime caused by a top navigation bar or bottom navigation bar / cookie warning bar covering the element. With angular 2, when clicking it scrolls until the element is only just on page. That means that when scrolling down to click something, if there is a bottom navigation, then this will obstruct the click. Similarly, when scrolling up it can be covered by the top navigation.
For now, to get around the scrolling up, I am using the following:
browser.refresh();
browser.driver.sleep(3000);
I made sure that I removed the bottom bar by clicking to close it before the test started.
That means the element is not within the visible area. There are several ways to handle this:
Force click the element regardless visibility
await browser.executeScript('arguments[0].click();', $element.getWebElement());
Scroll to the element and then click
await browser.executeScript(`arguments[0].scrollIntoView({block: "center"});`, $element.getWebElement());
await $element.click()
Maximize the working area of browser's window before tests
beforeAll(async () => await browser.driver
.manage()
.window()
.setSize(1920, 1080)
);