@sehsah2020 wrote:
hi ,
i’ve two application
first app update location with geolocation to mysql database
second app i need show location on google map by get location from database when updatedhow can i make it ?
Posts: 1
Participants: 1
↧
Ionic 4 show live location from mysql database
↧
How to change background color of ion-radio without updating background color of entire app?
@Sweg wrote:
I am trying to change the background of the
ion-radio-groupbelow to match the other rows:
I have shown my HTML & CSS below.
I tried adding the
rowStyleclass to the row. That changes the background of the row, but the radio button’s are still appearing blue.If I update the
--ion-background-colorvalue in my CSS forion-content, the radio button background does change, but so does the entire page.I just want all the rows to match.
Can someone please tell me how to do this?
<ion-content> <ion-grid style="width: 75%"> <ion-radio-group [(ngModel)]="userType"> <ion-row class="rowStyle"> <ion-item> <ion-label>Customer</ion-label> <ion-radio value="customer"></ion-radio> </ion-item> <ion-item> <ion-label>Supplier</ion-label> <ion-radio value="supplier"></ion-radio> </ion-item> </ion-row> </ion-radio-group> <ion-row class="rowStyle"> <ion-icon name="person" color="secondary"></ion-icon> <ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input> </ion-row> <ion-row class="rowStyle"> <ion-icon name="mail" color="secondary"></ion-icon> <ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input> </ion-row> <ion-row class="rowStyle"> <ion-icon name="key" color="secondary"></ion-icon> <ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input> </ion-row> <ion-button expand="block" shape="round" fill="outline" color="light" style="margin-top: 20px;" (click)="signUp()">Sign Up</ion-button> </ion-grid> </ion-content>CSS:
ion-content { --ion-background-color:#3dc2ff; } .logo { font-size: 25vh; margin-top: 40px; margin-bottom: 20px; } h1, h6 { color: white; font-size: 1em; background-color: danger } .rowStyle { background-color: white; padding-left: 10px; border-radius: 30px; margin-bottom: 10px; ion-icon { margin-top: 13px; margin-right: 10px; } }I added the
rowStyleclass to the row. The background of the tag is appearing white, but the background of the 2 radio buttons isn’t changing.
Posts: 1
Participants: 1
↧
↧
How to remove bottom border of ?
@Sweg wrote:
I am displaying some radio buttons like so:
But now I want to remove the bottom border from them.
Below is my HTML & CSS, can someone please tell me how to do this?
<ion-radio-group [(ngModel)]="userType"> <ion-row class="rowStyle"> <ion-item color="primary-contrast"> <ion-label>Customer:</ion-label> <ion-radio value="customer"></ion-radio> </ion-item> <ion-item color="primary-contrast"> <ion-label>Supplier:</ion-label> <ion-radio value="supplier"></ion-radio> </ion-item> </ion-row> </ion-radio-group>CSS:
.rowStyle { background-color: white; padding-left: 10px; border-radius: 30px; margin-bottom: 10px; ion-icon { margin-top: 13px; margin-right: 10px; } }
Posts: 2
Participants: 2
↧
Mousewheel and keyboard is not working on mac for ionslide component
@saammybwoy wrote:
When I scroll using trackpad on ionslides, slides are not scrolling up , i have to move them by clicking and dragging.
But on idangerous website in mousewheel demo, it is working fine.
Posts: 1
Participants: 1
↧
Is it possibile to "slice" a Modal?
@Fringo wrote:
Hi, i’m trying to make something like the image shown below.
The “pop-up” is swipable and all three elements closes toghether
I tried with Modals but i think i cannot call 3 different modals at the same time or “slice” a modal in three pieces showing different content.
Another option could be using multipleToasts but i can’t put HTML (images, link ecc) into a toast and, afterall, this isn’t the purpose of this kind of Ionic Component.
So, any ideas?
Any kind of help is very appreciated
Posts: 2
Participants: 2
↧
↧
How to implement scrolling bar of IonicChips in React
@matthewgoodman13 wrote:
Hi,
I am having trouble being able to make a horizontal scrolling bar of Ionic Chips. How can I implement this.
I am trying to get the ‘filter’ or ‘category’ effect. The photo below shows what I have. I want all the ‘Chips’ to be horizontally scroll-able on one row so I can add as many as I want.
Posts: 1
Participants: 1
↧
Trigger an event on user is on screen lock
@Ludoztw wrote:
Hello,
Do you know if it’s possible to trigger an event in my Ionic application on user is checking his screen lock (Android device)
Example :
?.on('...', function() { console.log("I turned on my screen and I'm on screenlock!"); });Many thanks,
Posts: 1
Participants: 1
↧
Button Auto Submit
@viswanathb wrote:
Hello I’ve developed an SMS reader application I want to auto submit the message after receiving it is there any way I tried calling that click function using an if based on the length of SMS body but is not working can anyone help me do this
<ion-header> <ion-toolbar color="primary"></ion-toolbar> </ion-header> <ion-content no-padding> <h2 style="text-align: center;">AUTO SMS READER</h2> <ion-row> <ion-col> <p style="text-align: center;"> Note : Send SMS to this Mobilenumber it will auto read the message</p> </ion-col> </ion-row> <ion-row> <ion-col> <ion-item> <ion-input type="number" [(ngModel)]="phone" required>{{smsaddress}}</ion-input> </ion-item> <ion-item> <ion-input type="text" [(ngModel)]="message" required>{{smsbody}}</ion-input> </ion-item> </ion-col> </ion-row> <ion-row> <ion-col> <ion-button expand="block" (click)="submit()" color="undefined" class="transition"> <strong class="white"> SUBMIT </strong></ion-button> </ion-col> </ion-row> </ion-content>ts code ionViewWillEnter() { this.start(); } start() { SMSReceive.startWatch( () => { console.log('watch started'); document.addEventListener('onSMSArrive', (e: any) => { console.log('onSMSArrive()'); var IncomingSMS = e.data; this.smsaddress = IncomingSMS.address; this.smsbody = IncomingSMS.body; console.log(JSON.stringify(this.smsbody)) }); }, () => { console.log('watch start failed') } ) } resetdata(){ this.smsaddress=""; this.smsbody=""; } submit() { var data = { phone: this.smsaddress, message: this.smsbody, } const headers = new HttpHeaders(); headers.append('content-type', 'application/json'); this.http.post(this.ip + '/api/test', data, { headers: new HttpHeaders({ "content-Type": "application/json" }) }).subscribe(response => { alert(response); alert(JSON.stringify(response)); }) this.presentToast('Message has been submitted successfully', false, 'bottom'); this.resetdata(); }
Posts: 1
Participants: 1
↧
Unable to implement ionic animation in a div inside every slider
@dipankar123 wrote:
Dear all,
I am trying to implement ionic animation api inside a div. this div is placed in every ion-slide
ionic animation working in 1st ion-slide but not working from 2nd ion-slidehere is my code
HTML<ion-slides #slider [options]="slideOpts" effect='fade' (ionSlideDidChange)='slideChanged()'> <ion-slide class="slider" *ngFor="let item of slideImages" [ngStyle]="{'background-image': 'url('+item.image+')'}"> <div class="slide-background"> <div class="info-on" id="info" [innerHTML]="domSanithize.bypassSecurityTrustHtml(item.info)" #animatedInfo> </div> </div> </ion-slide> </ion-slides>page.ts
slideImages = [ { info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>First information</span><br> click here', image: '../../../assets/IMG/frstInfo.jpg', }, { info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>Second information</span><br> click here', image: '../../../assets/IMG/2ndInfo.jpg', }, { info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>Thirs information</span><br> click here', image: '../../../assets/IMG/3rdInfo.jpg', }, ] ngOnInit() { this.menu.enable(false); setTimeout(() => { this.playAnimation(); //<--animation working }, 700); } playAnimation() { console.log('started animation'); this.animation = Animation; this.animation = this.animationCtrl.create() .addElement(this.animatedInfo.nativeElement) .duration(1300) .fromTo('left', '-10px', '10px') .fromTo('opacity', '0', '1'); this.animation.play(); } slideChanged() { this.playAnimation()// not working }please help
thanks in advance
Posts: 1
Participants: 1
↧
↧
IonSegment default checked item not working
@tanchifu wrote:
I have used IonSegment in Ionic v4, and I just updated ionic to v5 (5.0.7) But the default selection is not working any more! Help!
Posts: 1
Participants: 1
↧
PWA firebase push : messaging.onMessage never called
@vgoesi06 wrote:
Hi alls,
I have an ionic 4 angular PWA project and want to use firebase cloud messaging.
Registration with firebase is ok aénd I can get token my problem that messaging.onMessage never called and the notification catched by OSthis my firebase-messagin-sw.js
importScripts('https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.12.0/firebase-messaging.js'); const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function(payload) { const notificationTitle = 'Background Message Title'; const notificationOptions = { body: 'Test ' + JSON.stringify(payload), }; return self.registration.showNotification(notificationTitle, notificationOptions); });other staff is made in my notification service
Any idea ?
Posts: 1
Participants: 1
↧
Ionic navbar dropdown-menu
@akshh wrote:
Wanted to create dropdown menu similar to the picture mentioned.Can anyone please help me regarding this.Clicking on icon must display the dropdown.Usage angular ionic4.
.
.Posts: 1
Participants: 1
↧
Ionic v4 : Ionicons (v5) appearing and disappearing
@aevargas wrote:
I upgraded to the newest version of ionicons (v5) and sometimes the icons do not render. It fixes itself if I was to close the app and re-open it but sometimes when it’s first loaded in, it works. Any ideas?
Posts: 1
Participants: 1
↧
↧
Full screen with notch in Iphone XR for example
@alanmontgomery19 wrote:
Hey there,
I’m using Ionic React and I’ve just received some feedback from my QA team, which i didn’t even take into consideration - Phones like the Iphone XR with a notch at the top is cutting off the Logo that i have in the middle of the toolbar at the top.
Is there a global var needing set or something to avoid this and paint the app below the notch area? Like a different safe area or?
Any help appreciated, thanks.
Posts: 2
Participants: 1
↧
HELP: Meteor + Vue + Ionic
@aayush wrote:
The current application that I am working on is built on Meteor + Vue.
I am trying to integrate Ionic on the current stack to give a PWA experience on mobile.
I have installed
@ionic/core@5.0.7and@ionic/vue@0.0.9But as soon as I import Ionic
import Ionic from '@ionic/vue'
I get an error saying that an icon svg file can not be resolved.I also npm installed
ionicons@4.5.9-1just for good measure.
Is there anything that I am missing at the moment?
Posts: 1
Participants: 1
↧
How do I loop over a multidimensional array with ngFor in angular?
@Simbaclaw wrote:
suppose I have an object like this:
0: ["some string 1"] 1: Array(3) 0: "some string 2" 1: "some string 3" 2: "some string 4" length: 3 __proto__: Array(0) 2: ["some string 5"] 3: ["some string 6"] 4: ["some string 7"]and the structure of it can change from one of the top level array indexes to a multidimensional array. So for example it could become:
0: ["some string 1"] 1: Array(3) 0: "some string 2" 1: "some string 3" 2: "some string 4" length: 3 __proto__: Array(0) 2: Array(4) 0: "some string 5" 1: "some string 6" 2: "some string 7" 3: "some string 8" length: 4 __proto__: Array(0) 3: ["some string 9"] 4: ["some string 10"]how would I loop over this using ngfor so that everything becomes top level, I want to display from 1 counting up to the last string number.
currently when I use a single ngfor it’ll create a element for array number 1 with comma seperated valuesthe output needs to look like:
<p>some string 1</p> <p>some string 2</p> <p>some string 3</p> etcWhile when using ngfor on a p tag like so:
<p *ngFor="let object of stringsArray">{{object}}</p>for the strings object in the first example of this post it does this:
<p>some string 1</p> <p>some string 2,some string 3,some string 4</p> <p>some string 5</p>To get this to work all I would have to do is move the second dimension to the first dimension of the array.
ANSWER:
This can be achieved with a simple spread operator in ES6 to concatenate the multidimensional array into a single dimensional one like so:arr1d = [].concat(...arr2d);
Posts: 6
Participants: 2
↧
RTL Not Work
@alitalaee wrote:
Hi I want to rtl my ionic app but that`s Not work…
My Ionic and Cordova Version
I Added rtl to html tag
please Help me Thanks
Posts: 2
Participants: 2
↧
↧
Ionic list with *ngFor: interline too large
@pimol wrote:
Hi All. I have a simply list to show, this is the html:
<ion-item *ngFor="let item of checklist" lines=none> <ion-label> <div class=popLine> {{ item.key }} </div> </ion-label> <ion-label> <div class=popLine> {{ item.dato }} </div> </ion-label> </ion-item>I can’t find out what is the css I have to modify to have less space between a line and the other…
There is always a space of about the same height the the line. I’m trying to have a more compact output…
I tried with padding-bottom and padding-top = 0 and --padding-top and bottom =0 in all the class i imagine: .popLine, ion-item, ion-label, ion-list in local and global css…Any help?
Pietro
Posts: 1
Participants: 1
↧
Protect ts file content
@albertogari wrote:
¿Is there a way to protect the contents of a TS file from being edited?
Posts: 1
Participants: 1
↧
How to add a new color to in Ionic 4+?
@Sweg wrote:
I am able to specify the color of an
<ion-item>below:<ion-item color="primary-contrast">But instead of using one of the default colors, I want to use a particular hexcode.
How do I add this new color to the
<ion-item>?Do I have to add it to my variable.scss file, & if so, how? Thanks a lot!
Posts: 1
Participants: 1
↧