I use privacy-screen plugin to hide content when app is in the background, but it shows just gray background. I need to set splashScreen instead. Any suggestions?
I tried splashScreen plugin, but it is not working for me.
I don't know if it's the best way but I think that using Capacitor appStateChange from #capacitor/app (documentation) you could show and hide a screen with your logo when app is in background or foreground.
import { App } from '#capacitor/app';
App.addListener('appStateChange', ({ isActive }) => {
console.log('App state changed. Is active?', isActive);
if(!isActive) showLogoScreen();
else hideLogoScreen();
});
I hope it helps :)
For iOS, I did it simply in native code: just find the "applicationWillResignActive" method in AppDelegate and insert a view on top of the window.
For Android, sadly I couldn't find a better solution. The "gray background" you described is likely the implementation of Hide screen in 'Recent Apps List', but allow screenshots
I am developing an app, and it works 100% in android. In IOS I have 2 issues:
refresher does not work
<ion-refresher slot="fixed" #ionRefresh="doRefresh($event)">
there is a flicker when I touch the screen (may be related to background? I read some old posts about that)
ion-content.background{
--background: url(/bg.png) 0 0/100% 100% no-repeat;
}
I don't believe its relevant to this issue, but I am using vuejs.
I tested in various desktop browsers and it works as well.
So, we had 2 things here, and I thank #johnborges for following up
it was necessary to add the pullingIcon
link for Ionic docs
and the relevant paragraph
Using the iOS native ion-refresher requires setting the pullingIcon
property on ion-refresher-content to the value of one of the available
spinners. See the Spinner Documentation for accepted values. The
pullingIcon defaults to the lines spinner on iOS. The spinner tick
marks will be progressively shown as the user pulls down on the page.
the flicker, based on this link from stackoverflow I added a CSS DIV element instead of styling ion-content. It worked. I had to do a secodn CSS trick because one of my pages had fullpage slides and padding, but after that it worked
Using IONIC 4 ion-searchbar, I am trying to add cancelButtonText as below which it is not working.
//first way
<ion-searchbar showCancelButton="true" cancelButtonText="Clear"></ion-searchbar>
//second way
<ion-searchbar showCancelButton cancelButtonText="Clear"></ion-searchbar>
Can anyone please provide any solution for this ?
If you are testing the cancelButtonText in Android platform it wont be working because in the ionic documentation of ion-searchbar they have mentioned that the cancelButtonText is only for the IOS platform and they have given the mode as IOS or md for the attributes.So the attributes will be worked based on the mode.
Also I have created the stackblitz so that you can check the example
https://stackblitz.com/edit/ionic-n93fh7?file=pages%2Ftabs%2Ftabs.html
When you change the mode to md in the example cancelButtonText is not working.
You can refer the documentation here ion-searchbar
I am just getting started with Ionic 2. I have created an img file in app inside it is a file logo.png. So I have created the following code:
css:
.getting-started {
.logo {
background-image: url(./img/logo.png);
}
}
html:
<ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
<h3>Welcome to your first Ionic app!</h3>
</ion-content>
I know the css is working, as if I toggle the background color, I get the expected results. However, I don't get any background image, just the Logo text specified. Where should I have put the image file?
EDIT: As of Ionic 2 RC 0, the correct place to put your images is in src/assets/img/ and the correct code to reference the image is <img src="assets/img/myImg.png">. Please see Ionic's change log for RC0 (specifically #28).
As of right now, using the official Drifty Co. Ionic 2 Conference App as a reference, images should be placed inside of the www/ directory.
In my current Ionic 2 app, an image is located at www/img/logo.png and it is referenced in app/pages/page_name/page_name.html as <img src='img/logo.png'> and it works like a charm.
Currently using:
ionic-angular v2.0.0-beta.6 (package.json)
ionic-native ^1.1.0 (package.json)
ionic-cli v 2.0.0-beta.25 (installed CLI)
Using Ionic 2 beta 6, I handled this with a simple gulp task. I dropped my images in app/assets/images (this path is completely arbitrary). Then, I added the following task to gulpfile.js:
gulp.task("assets", function() {
return gulp.src(["app/assets/images/*"])
.pipe(gulp.dest("www/build/images"));
});
You'll also need to update the watch and build tasks to include the new assets task in their calls to runSequence(). I don't believe the order of tasks in the sequence matters, in this case:
gulp.task("build", ["clean"], function(done) {
runSequence(
["sass", "html", "fonts", "assets", "scripts"],
function() {
buildBrowserify().on("end", done);
}
);
});
If you output your images to the same path as I did, then you would reference your images in CSS from ../images/image-name.png and in <img> tags from build/images/image-name.png. I have confirmed that these images are visible both from the browser and an Android device. I don't think it should be any different for iOS.
The assets folder is the correct folder to place any media.
The location of my image:
fyi: if you dont have the folder, just create it
src > assets > img > background.png
variables.scss
.backgroundImage {
background-image: url('../assets/img/background.png');
}
Then on the page I want to use it on:
home.html
<ion-content padding class="backgroundImage">
</ion-content>
You can also reference images the following way:
home.html
<ion-content padding class="backgroundImage">
<img src="./assets/img/background.png" width="50%" />
</ion-content>
www\lib\ionic inside ionic create one folder img
now your path
www\lib\ionic\img put your background image inside this img folder and in your
www\lib\ionic\css\ionic.css
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}
OK, so I found the answer on the IONIC forum. The images go in www/img, the paths to these is then:
url('../../img/appicon.png')
when referenced from css or html in a page folder which is in pages in app.
Hope this helps anyone in the future.
I was having same problem, I found a way, I don't know if is the best way, but it's work.
the images must go on a file sibling to build, inside folder www
www
build
img
Got the solution. Its using path relative to index.html and not template folder.
So we need use path without../
src="img/John_Williams.jpg"
This works both on browser and apk
I could not manage to make it work using a PNG file. It worked in the browser but when I build the app and deployed to a device it did not displayed.
Instead of fiddling with the Gulp file to understand what was going on, I figured out a simpler workaround :
Inline the image into your HTML (or CSS) using a Data URI.
There are many tools online such as this one that will convert your PNG to a Base64 data URI.
If your image is pool.jpg. Place it in /src/assets/img/pool.jpg
It needs to be in this directory (assets) as it is your source from where everything gets built.
Then stop your ionic serve command (Ctrl-C) or whatever you use.
Then delete EVERYTHING under www directory (it all gets rebuilt anyway).
Then restart your server by running 'ionic serve' again.
This will rebuild the directory with the images.
You can reference the image as background-image: url('../assets/img/pool.jpg');
in your code.
I am using ionic 3 and it's a shame it doesn't pick up changes in the assets directory. IONIC should look at this.
I 'm currently on ionic version 3.6 and I had to use this to work:
src="../../assets/img/myImage.jpg"
The path assets/img/myImage didn't work for me
I hope this helps
Hi Guys i found a method add images to ionic v2
Create a images folder in "www" directory (www/images/) and add your all images in this path.
Then give your image path like this
ex: for pages
src="images/logo.png"
in CSS
.ThemeColor{ background: url(/images/bg.png)};
That's it, works for me..
Thanks
I tried teh jScroll plugin by Kelvin Luck. First of all its a wonderful script. Its working fine with text, ie text as contents, in all browesers. But when we insert images in that the scroll is not working in Safari and Chrome... please help me. Am a beginner in javascrpt...:)
Retheesh
Another way of doing it is to initialise the plugin once the entire page is loaded
$(window).load(function(){
$('.scroll-pane').jScrollPane();
})
Ok, this way late, but I just spent most of the day figuring this out.
It's actually quite simple and also sort of explained in the jScrollpane Demo pages...
Since I am using the Wordpress plugin, using the the workaround Dann provided seemed a bit to complicated. The solution here is setting the image height in your CSS file for this specific page instead of (or on top of) declaring them inline.
So basically if you have
<div id="mydiv">
<img src="...." height=200px"/>
>/div>
jScrollpane won't recognize the height of the pictures and count them for your div height. So you need to add a class to your div and define the img height in your CSS:
#mydiv .newclass img {
height: 200px;
}
and it will work fine!
I had a similar problem.
Reinitialising the panel seemed to work.
I used this script:
$('.image_class').load(function () {
$('.scroll-pane').jScrollPane();
});
Dann
It's a known issue, but Dann's workaround is effective. I ended up testing for the presence of troublesome images, since they weren't always present on the page and affecting the scroll area size:
$(function() {
if($('.image_class').size()) {
$('.image_class').load(function() {
$('.scroll-pane').jScrollPane();
});
} else {
$('.scroll-pane').jScrollPane();
}
});