I’m still an at impasse in this. Has anyone else seen this?
↧
Ion-range is not clickable in iOS?
↧
Prefers-color-scheme not working?
Since the release of macOS Mojave we redesigned all our websites etc to support the dark theme. This is a system set setting available in most OS/browser combinations. On iOS in safari it works perfectly but not in my ionic app.
I have the following CSS to make the difference obvious.
@media (prefers-color-scheme: dark) {
.content-md,
.content-ios {
background-color: green !important;
}
}
@media (prefers-color-scheme: light) {
.content-md,
.content-ios {
background-color: yellow !important;
}
}
source https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
No matter what I do the content is always yellow, if I open it in the browser on my ios device it works perfectly.
↧
↧
Float search bar auto-complete over the content
i want these shape.
auto-complete contents are above the original contents.
but my app,
this is original contents.
and
whenever i try to search something, the auto-complete contents are push the original contents.
i want these are overlapping.
help
↧
Ion-header partially visible on Android
can you inspect it in chrome and try giving margin or padding to ion-header
or simply create < ion-toolbar >& nbsp ;< /ion-toolbar > above ion-navbar
↧
Having a hard time showing filtered observable
So I got it working. Here’s my code in case anyone else is having this issue.
json
{
"hospitals": [ {
"id": "1",
"name": "Lehigh Valley Hospital-Cedar Crest",
"address": "1200 South Cedar Crest Blvd, Allentown, PA 18105",
"website": "www.lvhn.org",
"trauma": "Level I",
"peds": "Level II",
"stroke": "Comprehensive",
"ebola": "No",
"phone": "610-402-8000",
"special": "Special Annodote",
"speciallink": "www.lvhn.org"
},
{
"id": "2",
"name": "Lehigh Valley Hospital-17th Street",
"address": "17th and Chew Sts, Allentown, PA 18105",
"website": "www.lvhn.org",
"trauma": "N/A",
"peds": "N/A",
"stroke": "N/A",
"ebola": "No",
"phone": "610-969-2388",
"special": "Special Annodote",
"speciallink": "www.lvhn.org"
},
{
"id": "3",
"name": "Lehigh Valley Hospital-Mulenberg",
"address": "2545 Schoenersville Rd, Bethlehem, PA 18017",
"website": "www.lvhn.org",
"trauma": "N/A",
"peds": "N/A",
"stroke": "Primary",
"ebola": "Yes",
"phone": "610-402-8000",
"special": "Special Annodote",
"speciallink": "www.lvhn.org"
},
{
"id": "4",
"name": "Lehigh Valley Hospital-Hazleton",
"address": "700 East Broad St, Hazleton, PA 18201",
"website": "hazleton.lvhn.org",
"trauma": "N/A",
"peds": "N/A",
"stroke": "Primary",
"ebola": "No",
"phone": "570-501-4000",
"special": "Special Annodote",
"speciallink": "www.lvhn.org"
}
]
}
html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Hospitals</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-searchbar placeholder="Search by Name" [(ngModel)]="searchTerm" (ionChange)="filterMe()"></ion-searchbar>
<ion-list *ngIf="results">
<ion-item button *ngFor="let item of (results | async)" routerDirection="forward" [routerLink]="['/hospital-details/'+ item.id]">
<ion-label text-wrap>
<h3>{{ item.name }}</h3>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Routes, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { GetHospitalsService } from '../../services/get-hospitals.service';
import { SearchPipe } from './../../search.pipe';
import {filter, map, switchMap} from 'rxjs/operators';
import { FormControl } from '@angular/forms';
import {json} from '@angular-devkit/core';
@Component({
selector: 'app-hospitals',
templateUrl: './hospitals.page.html',
styleUrls: ['./hospitals.page.scss'],
})
export class HospitalsPage implements OnInit {
// information = null;
searchTerm = '';
searchText = '';
data: any;
results: Observable<any[]>;
information: Observable<any[]>;
myControl = new FormControl();
constructor(private activatedRoute: ActivatedRoute, private hospitalService: GetHospitalsService, private router: Router) { }
ngOnInit() {
console.log('Hospitals enter');
this.results = this.hospitalService.getHospitals1();
this.information = this.results;
}
filterMe() {
console.log('searchterm', this.searchTerm);
this.searchText = '';
if (this.searchTerm != null) {
this.searchText = this.searchTerm.toLowerCase();
} else {
this.searchText = '';
}
this.results = this.information.pipe(
map((reports: any[]) => reports.filter(p => {
if (p.name.toString().toLowerCase().indexOf(this.searchText) > -1) {return p; }
}))
);
console.log('results - after', this.results);
}
}
↧
↧
Ionic 4 won't show ads but in console is successful
Anyone??
…
↧
Displaying PDF in iframe in native
I have built part of my app to display local PDFs from a pdf folder under assets in an iframe. It works fine in ionic lab, but will it work with ios and android native?
Is there anything special I need to do?
html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>{{information.name}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<iframe name= "eventsPage" [src]="this.mysite" width="100%" height="95%">
</iframe>
</ion-content>
ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {GetProtocolsService} from '../../services/get-protocols.service';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-protocol-details',
templateUrl: './protocol-details.page.html',
styleUrls: ['./protocol-details.page.scss'],
})
export class ProtocolDetailsPage implements OnInit {
information = null;
protocols = null;
mysite = null;
constructor(private activatedRoute: ActivatedRoute, private protocolService: GetProtocolsService, private router: Router,
private sanitizer: DomSanitizer) { }
ngOnInit() {
// Get the ID that was passed with the URL
let id = this.activatedRoute.snapshot.paramMap.get('id');
console.log('Details');
this.protocolService.getProtocols().subscribe(result => {
console.log('getHospitals1 executed')
this.protocols = result;
console.log('result', result);
this.information = this.filterArr(id)[0];
console.log('information', this.information);
this.mysite = this.sanitizer.bypassSecurityTrustResourceUrl('../../../assets/pdf/' + this.information.pdf.toString());
});
}
filterArr(search) {
// Get the real array forst of all
let arr = this.protocols;
return arr.filter(oneObj => oneObj.id.indexOf(search) >= 0);
}
}
↧
How to perform multiple click event in ionic
You can use Hammer JS, which supports many types of gestures in mobile, their tap events also contain the tapCount attribute, which should be what you want
https://hammerjs.github.io/recognizer-tap/
↧
Ion-header partially visible on Android
If I inspect it in Chrome dev tools the web actually looks fine. It’s only on android that it looks overlapped with the status bar. I can manually add padding-top:50px which pushes the whole thing down, but it would look weird then on ios as it would be pushed down:
Additonally, this situation happens 9 out of 10 cases, then once it’s fine, but I cannot figure out the pattern.
Thanks
↧
↧
Get data from firebase with unique ID
can you send me full code
↧
Take the data of specifique id firebase
i want to get data from firebase using a specifique id
i tried this but it keep taking the id and return null as data
export class Festival{
monument= {} as Monument;
itemList: AngularFireList
itemArray =
imageSource;
musePhoto;
constructor(public navCtrl: NavController, public navParams: NavParams,
public db:AngularFireDatabase,public festivalservice : FestivalserviceProvider,
public alertCtrl: AlertController, public storage:Storage, public router:Router) {
this.itemList = db.list('festival')
this.itemList.snapshotChanges()
.subscribe(actions=>{
actions.forEach(action=>{
let y = action.payload.toJSON()
y["key"] = action.key
this.itemArray.push(y as Monument)
})
})
console.log(this.itemArray)
this.imageSource = 'bardo4';
this.getPhotoUrl();
}
getPhotoUrl(){
firebase.storage().ref().child(‘images/’+this.imageSource+’.jpg’).getDownloadURL().then((url)=>{
this.musePhoto = url;
})
}
moreInfo(key){
this.navCtrl.push(DetailsFestivalPage, {key: key} )
console.log(key);
// this.router.navigate(['detailsfestival/'+key])
}
}
export class Details {
id:string;
itemArray=;
constructor( public museService:FestivalserviceProvider,
public activatedRoute:ActivatedRoute) {
this.id = this.activatedRoute.snapshot.params[‘id’];
this.museService.getFestival(this.id).snapshotChanges().subscribe(actions=>{
let y = actions.payload.toJSON()
this.itemArray.push(y as Monument)
});
console.log(this.itemArray);
}
}
↧
Ionic4 ion-button width
Does it work for you when you put it in a page’s .scss?
↧
Ion-toggle 2-way databinding not showing correct state on load
Hello,
I have the same problem, did you find a solution ?
↧
↧
Ion-header partially visible on Android
↧
[ionic 4] - How to disable swipe back /go back
Hello,
is there some possibility to disable swipe back (on iOS) and go back (and android) for each component/page separately?
E.G. When user log out from app, he is redirected to the login page, but now, when he goes back, he get the profile page :-/
So if swiping back is not possible to disable, is there some way to prevent this behavior?
Thanks
↧
How to use rating star in ionic 4?
is there anyway we can show default value after its being rated?
↧
Ion-toggle 2-way databinding not showing correct state on load
Unfortunately not yet.
If you discover a fix/work around, I would appreciate it if you can share it here.
↧
↧
Is Ionic-Cordova-Angular the right choice for my app?
Hello all,
I’m deciding on a technology for an app I’m building and could use your help to determine if I’m running in the right direction.
This tech stack seems to do everything I need it to do, however I’m wondering if it would be feasible to allow users to sign PDF’s which are stored on a remote server, and then upload them to a different location on a remote server. One area of concern for this app and it’s users is connectivity, sometimes the users may be using the app in area with poor internet connection, so I have to have some sort of mechanism in place which will continue attempting to upload the file, even if the user goes offline for a moment or longer.
Do you have any experiences or suggestions regarding this?
Thank you
↧
Error load resources in ionic 4 run android or ios
I found for me it was caused by a bad plugin, the cordova-background-mode-plugin when removed allowed the app to function again.
↧
What is this?: Will-change memory consumption is too high
Ionic3 uses ‘will-change’ in various components, including ion-slides, ion-scroll (.scroll-content), ion-reorder, ion-picker, ion-toggle and ion-range. You can find the CSS in the node_modules/ionic-angular/css/ directory. Designed for SPA apps, if your app grows (like mine has) to include enough of these elements, you will get this warning in Firefox and it may lead to rendering errors.
↧