@solaire wrote:
In this forums I see customization like this. I see that in the api docs I find that ion-content supports --background. But now, how do I know what I cann pass to that and in which order?
ion-content { --background: url('assets/imgs/testPic.jpg') 0 0/50% 10% no-repeat; }
Posts: 1
Participants: 1
@TotalHobbies wrote:
Good afternoon. I am developing an application which makes use of the Barcode Scanner plugin. Perform the installation and add the sentences that mark the official documentation: https://ionicframework.com/docs/native/barcode-scanner.
When calling the function to run the scanner the application closes, and it does not show any error message.
Has something similar happened to someone?
Posts: 1
Participants: 1
@acraig wrote:
The best way I can explain the issue is this-
For iOS 12+, when the user taps the input box to type, the keyboard comes up, but there are no characters being added to the input box. You have to tap again to gain focus, then it works fine.
It seems like something is up with the iOS version not gaining focus until you press it twice. I tested the same scenario on an iphone with iOS 11.2.6, and it worked perfect. The phones that displayed the issue were both using 13.3.1.
After tapping just once:
After tapping a second time:
Any ideas or suggestions?
Ionic version: 1.3.3
Cordova: 8.1.1
iOS: 5.1.1Using ionic-plugin-keyboard @2.2.1
I tried using the new cordova-plugin-ionic-keyboard, but same outcome.
Posts: 1
Participants: 1
@feliperiverot wrote:
0
I created an app with a register form in ionic 4 and angular. I want to do the following:
I have two ion-selects, one is for a countries list and that another is for phone codes list. The behavior i am looking for is: when a country is selected in the ion-select for countries, the corresponding telephone code must be selected automatically in the phone code ion-select.
This is my code:
ion-select for countries
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event)" interface="popover"> <ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option> </ion-select>ion-select for phone code
<ion-select formControlName="phonecode" placeholder="Cod." interface="popover"> <ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option> </ion-select>Here is the function i am using to update the phone code ion-select
changeselect($event){ console.log($event.target.value) ; let item1 = this.countries.find(i => i.cod === $event.target.value); console.log(item1) ; this.codigoselected = item1.code; console.log(this.codigoselected) ; }I am using the variable “codigoselected” to determine which country is selected. for this, in the ion-select-option i am using a condition to change the selected status of the option like this:
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>The current behavior is like this:
I selected a country:
But the ion-select for phone codes seems not to be updated
But when I click on the field, the specific code is selected
I need to do clic under option is selected in order to field be refreshed:
So, how can I make the field for phone codes update automatically in the interface without the user clicking?
Posts: 1
Participants: 1
@psenechal wrote:
I have the collapsible header working, but I can’t seem to figure out how to replace/hide an image in the header when scrolling. Here’s what I have…
The toolbar at the top displays the menu toggle on the left. I would like to display a logo image in the toolbar until the user scrolls, then replace the image with the title that is in the collapsible header.
What happens now is that when I scroll, the collapsible header displays in the toolbar at the top, but it overlays the logo image. I tried adding a collapse=“false” to both an img and ion-img tag, but neither works.
Does anyone know how to achieve this? Thanks.
Posts: 1
Participants: 1
@devmob-firb wrote:
The app I’m working on supports two languages, but one language (German) usually takes up a lot of space. How can I adjust the components/CSS sizes when the user switch the languages?
I have a popover which the width fit for German but it’s too large for English language, so I wanna know if there is some other alternative besides the hardcoded size in the stylesheet. Thank you
Posts: 2
Participants: 2
@emeritvs wrote:
I’m trying to use this plugin: https://ionicframework.com/docs/native/speech-recognition
Each speechRecognition example (isRecognitionAvailable, hasPermission, getSupportedLanguages, requestPermission, startListening) when I call, this following error appears on screen:
My code:
How can I solve this?
Posts: 1
Participants: 1
@BetterAutomations wrote:
Seems Capacitor is hanging on Android 5.1 Lollipop, can anyone confirm?
According to the Browser Support page Android 5.0 is supported. I have a Moto G 1st Gen with Android 5.1. Just did a factory wipe and installed no apps, updated all onboard apps. I created a new Ionic app (ionic start myApp tabs), made no changes to the code. Default tabs app.
This launches perfectly on an Android 7 device, both installed through Android Studio and through the browser. Also works fine on a Windows Chrome browser. But on the 5.1 device, either brower or app just hangs.
Anyone having the same issue?
Posts: 1
Participants: 1
@detourOfReason wrote:
I have a app that has products available in several different colors and sizes. Each product color may be available(sometime not) in several sizes. I would like to be able to display the selection of colors on the product details page of my app. Ion-picker seemed like a good component by I can not find a way to change the background colors of the options. Each one of my product options has colors expressed as a hex value. I need to display those hex values in a way that can be selected.
<ion-item> <ion-label>Color: </ion-label> <ion-label *ngFor = "let colors of availableColors" >{{ availableColors }}</ion-label> <ion-button slot="end" fill="clear" (click)="showBasicPicker()">Select</ion-button> </ion-item>Any ideas on how to manipulate the ion-picker? or is there some other idea that I am missing?
Thanks in advance.
Posts: 1
Participants: 1
@puzzleout wrote:
I have a barcode scanning app that was built in Ionic in 2017 for Android. I need to get it updated to the latest version of Ionic with a small tweak.
The app uses the back camera to scan a barcode, then references a database to get an item name/value using PHP/MYSQL.
I have all of the source code. It just needs to be updated to the latest version. Let me know how much and how long this would take. Thanks!
Posts: 1
Participants: 1
@fbahari wrote:
What is the difference between page.module.ts and app.module.ts in ionic v 4?
I have a component that I use as tag in my page.html
but when import it in page.module.ts not recognize it but when import my component in app.module.ts ,
that is ok .
whats’s the matter?thank you
Posts: 1
Participants: 1
@Nithish-2027 wrote:
Hi I am creating a simple application that uses both Speech to text and Text to Speech. If use the speech recognition plugin in react projects it throws an error
If i run my app with cordova instead of ionic serve it throws cordova is not supported for @ionic/react projects. use capacitor instead . But capacitor doesn’t have native plugin for speech recognition.
Please suggest me an idea or solution for this .
Thank you
Posts: 1
Participants: 1
@peterjc wrote:
I am using the Ionic Network plugin to notify, and let me know when a device is online/offline.
Specifically I use the `type’ property…
public isOnline(): boolean { let netWorkType = this.network.type; this.logger.debug(`Network type: ${netWorkType}`); // Use this when running on browser (eg Ionic serve) where plugin does not work let isOnline = netWorkType == null ? navigator.onLine : netWorkType != "none" return isOnline; }This has always seemed to have worked for me, and does always seem to work for my in my environment. However, I have a case, where a Windows version, on a particular corporate network I have
network.type;returnnone.Looking into at thesource, I see
@CordovaProperty() type: string;but I cannot see where this is set anywhere.
Looking at the plugin it wraps source, I can see the
function getCurrrentConnectionType ()but I cannot see how this is hooked up to the
typeproperty if the Ionic wrapper.Does any one know how the
typeis set, and does is set by the abovegetCurrrentConnectionType?I want to be able try and diagnose what why I am getting
nonewhere the device is actually connected (andhttpcalls are working)I have added logging code such as
this.networkInfo = w.Windows.Networking.Connectivity.NetworkInformation; // get the ConnectionProfile that is currently used to connect to the Internet const internetProfile = this.networkInfo.getInternetConnectionProfile(); const message = "--*** logInternetConnectionProfileInfo ***--\n\r" + " ------------ Log single profile -----------------\n\r" + this.getConnectionProfileInfo(internetProfile); this.logger.info(message); ... /** * Helper as per https://docs.microsoft.com/en-au/previous-versions/windows/apps/hh452990(v=win.10) */ private getConnectionProfileInfo(connectionProfile) { if (connectionProfile == null) { return ""; } try { var returnString = "getConnectionProfileInfo" + "\n\r" + "ProfileName: " + connectionProfile.profileName + "\n\r"; switch (connectionProfile.getNetworkConnectivityLevel()) { case NetworkConnectivityInfo.None: returnString += "Connectivity Level: None\n\r"; break; case NetworkConnectivityInfo.LocalAccess: returnString += "Connectivity Level: Local Access\n\r"; break; case NetworkConnectivityInfo.ConstrainedInternetAccess: returnString += "Connectivity Level: Constrained Internet Access\n\r"; break; case NetworkConnectivityInfo.InternetAccess: returnString += "Connectivity Level: Internet Access\n\r"; break; } ...and the logging sent to me I see…
------------ Log single profile ----------------- getConnectionProfileInfo ProfileName: . Connectivity Level: Internet Access Connection Cost Information: ===============So I can see
Connectivity Level: Internet Access.So, just wondering first of all were
typeis set so I can start to try to see why I am not getting the correct value.Thanks in advance for any help!
Posts: 1
Participants: 1
@birja12 wrote:
I am follow this https://www.youtube.com/watch?v=HgR9UH3euR4&feature=emb_logo but how can send custom push notification and set alias
Posts: 1
Participants: 1
@Arianit08 wrote:
Will ionic 5 use angular 9 as default when creating new project?
Posts: 1
Participants: 1
@Ludolefrenchy wrote:
Hello
I want to make an app or when we press a text or button it displays the following text / button ect …
what is the best element to use?
button, card, text or other ??Thank you in advance.
Posts: 1
Participants: 1
@sehsah2020 wrote:
i used google map in project
it’s work fine in brwoser but not work on android when i runcordova platform add android
how can i fixed it ?
loadMap() {
Environment.setEnv({ 'API_KEY_FOR_BROWSER_RELEASE': '(AIzaSyAsQhHai1m971xeUsGsL7VaDQi95u2KcNU `https://`)', 'API_KEY_FOR_BROWSER_DEBUG': '' }); LocationService.getMyLocation().then((myLocation: MyLocation) => { let options: GoogleMapOptions = { camera: { target: myLocation.latLng, zoom: 17, } }; this.map = GoogleMaps.create('map_canvas', options); this.marker = this.map.addMarkerSync({ title: 'Ionic', icon: { url: 'assets/images/place2.png', size: { width: 32, height: 32 } }, position: myLocation.latLng, }); this.marker.on(GoogleMapsEvent.MARKER_CLICK) this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((data) => { this.lat = data['0']['lat'] this.lat = data['0']['lng'] console.log(data['0']['lat'], data['0']['lng']) localStorage.setItem('latitude', data[0]['lat']) localStorage.setItem('longitude', data[0]['lng']) localStorage.setItem('district', data[0]['subLocality']) this.GetNewlocation(data['0']['lat'], data['0']['lng']) this.marker.remove() this.marker = this.map.addMarkerSync({ title: 'Ionic', icon: { url: 'assets/images/place2.png', size: { width: 32, height: 32 } }, position: { lat: data['0']['lat'], lng: data['0']['lng'] }, }); this.marker.on(GoogleMapsEvent.MARKER_CLICK) } ); });}
in config file
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="AIzaSyCGCjN3qK_eoYut2nOHluS8xw4TsRW4qGI" />
Posts: 1
Participants: 1
@sehsah2020 wrote:
hi
how can change background to transparent in first tabs
when i use this classion-tab-bar {
--background: transparent; --ion-color-base: transparent !important; position: absolute; bottom: 0px; width: 100%; --color: #b9b9b9;}
it’s change in all tabs but i neef first tabs only
Posts: 1
Participants: 1
@semanticnet wrote:
Hello
I need to create ionic blank project verison 4.
ionic start map4 blank --type=angular (this is creating version 5)
ionic start map4 blank --type=ionic-angular (this is creating version 3.9 version)Ionic CLI : 5.2.3
Posts: 1
Participants: 1
@Divergent wrote:
Hey guys, not sure if you understand my question but where can I find a guide on how customization works on Ionic? I mean, how to center things? Tables? Forms? For example what Bootstrap provides. Or do I have to integrate bootstrap too? Doesn’t Ionic not have such features?
Posts: 1
Participants: 1
