@spacecadet wrote:

Please help. Trying to expand image width to 100% of menu width in ios. Android works correctly (image expands to 100%) and height adjust automatically. Please see pics and code.

Simulator Screen Shot - iPhone XS Max - 2019-03-16 at 18.27.00.jpg1242×2688 295 KB

app.html

<ion-menu [content]="mainContent" type="overlay" persistent="true">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          <div class="logo-image">
            <img alt="logo" src="assets/icon/NAMI StTammany LOGO_White w gold.png">
            </div>
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="menu-gradient">

      <button id="menu-button" ion-button large block menuClose on-click="goToResources()" icon start><ion-icon name="search"></ion-icon>
         <ion-label>Resources</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToAccount()" icon start><ion-icon name="custom-star-outline" src="assets/star-outline.svg"></ion-icon>
         <ion-label>Favorites</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToReferenceDocuments()" icon start><ion-icon name="document"></ion-icon>
         <ion-label>Documents</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToAbout()" icon start><ion-icon name="information-circle"></ion-icon>
         <ion-label>About NAMI</ion-label>
      </button>
      <button id="menu-button" ion-button large block menuClose on-click="goToDonate()" icon start><ion-icon name="card"></ion-icon>
         <ion-label>Donate</ion-label>
      </button>
      <!-- <img src="assets/icon/IconNAMI_1024x1024.png" style="display:flex;width:auto;height:auto;margin-left:auto;margin-right:auto;"> -->
    </ion-content>

    <!-- <img src="assets/icon/IconNAMI_1024x1024.png" style="display:flex;width:auto;height:auto;margin-left:auto;margin-right:auto;"> -->
  </ion-menu>
  <!-- <ion-nav [root]="rootPage" #mainContent></ion-nav> -->

<ion-content padding><ion-nav #mainContent [root]="rootPage"></ion-nav></ion-content>

app.scss

.logo-image{
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
    
  }
  
  .toolbar-background {
    background: #0c499c !important;
   
  }

  .toolbar-title-md {
    padding: 0 12px;
    font-size: 2rem;
    font-weight: 500;
    color: white !important; 
}

.toolbar-title-ios {
  padding: 0 12px;
  font-size: 2rem;
  font-weight: 500;
  color: white !important; 
}

.toolbar-title-ios .img {
  width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
}



  .bar-button-default-md, .bar-button-clear-md-default, .bar-button-md-default {
    color: white;
    background-color: transparent;
}

.bar-button-default-ios, .bar-button-clear-ios-default, .bar-button-ios-default {
  color: white;
  background-color: transparent;
}

.menu-gradient {
  background: -moz-linear-gradient(top, rgba(12,73,156,1) 0%, rgba(0,0,70,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(12,73,156,1) 0%,rgba(0,0,70,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(12,73,156,1) 0%,rgba(0,0,70,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c499c', endColorstr='#000046',GradientType=0 ); /* IE6-9 */
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  // position: absolute;
  // z-index: 1;
  // display: block;
  // overflow-x: hidden;
  // overflow-y: scroll;
  // -webkit-overflow-scrolling: touch;
  // will-change: scroll-position;
  // contain: size style layout;
}

#menu-button{
  flex: auto;
  margin-right: auto !important;
  margin-left: auto !important;
  align-items: center;
  width: 90%;
  border-radius: 5px;

color: #0c499c;
background: -moz-radial-gradient(center, ellipse cover, rgba(253,251,251,1) 0%, rgba(235,237,238,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(253,251,251,1) 0%,rgba(235,237,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(253,251,251,1) 0%,rgba(235,237,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfbfb', endColorstr='#ebedee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 // contain: layout;
}


ion-searchbar {
  padding: 8px 0px 8px 0px !important;
 }
    
  .bshadow {
    flex-shrink: 1;
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }

Have been banging on my head for days on this one…

Posts: 1

Participants: 1

Read full topic

@royappa wrote:

If Ionic is used to develop an Android/IOS app that uses only local Ionic Storage and nothing stored in a server backend, will that user’s data be automatically backed up to IOS/Android clouds?

(Subject of course to the usual conditions, i.e., the user must have auto-backup turned on, be in WiFi range or allow mobile data, not go over the cloud’s limits, etc.).

Posts: 1

Participants: 1

Read full topic

@BellaaliAchraf wrote:

is their any alternative of ionic view or something to do to offer someone the possibility of testing the app in his phone? (I want to show a client my progress without giving him the source code)

Posts: 1

Participants: 1

Read full topic

@bedanta1998 wrote:

Is it possible to open my ionic 3 project for android in Android Studio and then generate the signed apk inside the Android Studio?

Posts: 1

Participants: 1

Read full topic

@razorachy wrote:

array0.png1366×1024 214 KB

array1.png1366×1024 211 KB

pleae help me how to do that… i m able to swnd only one image… first image goes to api but after that it doesnt

Posts: 1

Participants: 1

Read full topic

@ayubIonicpro wrote:

Respected Ionic Community,

I’m making ionic application and using WordPress API to fetch blogs but I’m unable to display image in app. API is providing me image ID but don’t know how to display it in App.

My code: <img [src]="blog.featured_media">

Capture.JPG811×443 48.9 KB

Posts: 1

Participants: 1

Read full topic

@LacOniC wrote:

Here is my starter with latest versions of ionic (4.1.1) and angular (7.2.9). You can view it at Github with additional info:

Posts: 1

Participants: 1

Read full topic

@erickchidubem wrote:

I keep getting

verbose stack SyntaxError: Unexpected end of JSON input while parsing near ‘…,“eslint”:"^4.19.1","’

when I try to start ionic app. Please i need help

Posts: 1

Participants: 1

Read full topic

@RiyadKhalifeh wrote:

Hello,
I’am using Vanilla Javascript in Ionic4
I want to route from one page to other but I don’t know how to add second page “such as Login Page for example”
This is my HTML code:

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
    <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
    <title>Hello World</title>
</head>

<body>
    <ion-app>
        <ion-menu side="start" menu-id="first">
            <ion-header>
                <ion-toolbar color="primary">
                    <ion-title>Start Menu</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <ion-list>
                    <ion-route url="/login" component="page-login">
                        <ion-item>Login Page</ion-item>
                    </ion-route>
                </ion-list>
            </ion-content>
        </ion-menu>

        <ion-header>
            <ion-toolbar>
                <ion-title>Menu - Basic</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
        </ion-content>
        <ion-content padding component="page-login">
            Welcome To Login Page
        </ion-content>
    </ion-app>

    <ion-menu-controller></ion-menu-controller>

    <ion-router>
        <ion-route url="/login" component="page-login"></ion-route>
    </ion-router>

    <!-- <script type="text/javascript" src="cordova.js"></script> -->
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

This is my JS code:

const menuCtrl = document.querySelector('ion-menu-controller');
const navCtrl = document.querySelector('ion-router');

function openFirst() {
    menuCtrl.enable(true, 'first');
    menuCtrl.open('first');
}

function login() {
    navCtrl.push("/login");
}

Thanks a lot

Posts: 1

Participants: 1

Read full topic

@reedrichards wrote:

Is it correct that navigating with an ion-anchor doesn’t close automatically the side menu? or did I forgot an attribute?

<ion-anchor href="/" routerDirection="forward">
    <div>
       <app-logo></app-logo>
       <span text-uppercase>My app</span>
    </div>
</ion-anchor>

Posts: 1

Participants: 1

Read full topic

@avex wrote:

How do you align text to left in ion-button?
And how do you detail styling ion-button style in class .button-inner?
It used to be very easy to style components in ionic v3, but w/ v4 easy things become hard things.
No ::ion-deep, nor >>> , nor UnEncapsulation provided, but just decided to use shadow dom in a hurry, like a monkey.
No benefit gained but inconvenience everywhere

<ion-button expand="full" text-left>Full Button</ion-button>

Shouldn’t flexible be the first thing a component library should consider?

Posts: 1

Participants: 1

Read full topic

@amouzigh wrote:

Hello guys,
I’m using Ionic Google Maps, with this configuration:
Ionic CLI:4.10.3

"@ionic-native/core": "^4.15.0",
"@ionic-native/google-maps": "^4.15.1",
"@ionic-native/splash-screen": "4.15.0",
"@ionic-native/status-bar": "4.15.0",
"cordova-plugin-googlemaps": "2.5.2",

  "cordova-plugin-googlemaps": {
    "API_KEY_FOR_ANDROID": "XXXXX",
    "API_KEY_FOR_IOS": "XXXXX"
  }

I have a strange issue (OK:Map displayed)
Application in Simulator :OK
Application installed using signed apk just before deploying to Google Play: OK.
Application installed using Google Play (the same apk as in step 2) : NOT OK. Map not displayed

Map page is accessed using tabs or using NavController.push.

For information: I was using ionic/native 4.18.0 but downgraded to 4.15.0
Before downgrading I hade this in config.xml:

<plugin name="cordova-plugin-googlemaps" spec="2.5.2">
    <variable name="API_KEY_FOR_ANDROID" value="XXXX" />
    <variable name="API_KEY_FOR_IOS" value="XXXX" />
    <variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
    <variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>

After deleing node_modules and installing (npm install), the variables PLAY_SERVICES_VERSION and ANDROID_SUPPORT_V4_VERSION dispaeared. (It was not working also when having ionic/naitve 4.18.0 and these two variables present in config.xml).

Thank you for your help.

Regards

Posts: 1

Participants: 1

Read full topic

@juuny wrote:

I have written the following code:
html

<ion-grid>
	<ion-row justify-content-center>
		<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">

			<form [formGroup]="userForm" (submit)="saveProfile()" padding novalidate>
				<ion-item>
				    <ion-icon name="mail" item-start></ion-icon>
					<ion-input type="text" formControlName="firstName" placeholder="Nome" 
					[class.invalid]="!userForm.controls.firstName.valid && userForm.controls.firstName.dirty" clearInput></ion-input>
				</ion-item>
				<ion-item no-lines class="error-message" *ngIf="!userForm.controls.firstName.valid  && userForm.controls.firstName.dirty">
					<p style="font-size: 1rem; color: red">Invalid name.</p>
				</ion-item>
				<ion-item>
				    <ion-icon name="mail" item-start></ion-icon>
					<ion-input type="text" formControlName="lastName" placeholder="Sobrenome" 
					[class.invalid]="!userForm.controls.lastName.valid && userForm.controls.lastName.dirty" clearInput></ion-input>
				</ion-item>
				<ion-item no-lines class="error-message" *ngIf="!userForm.controls.lastName.valid  && userForm.controls.lastName.dirty">
					<p style="font-size: 1rem; color: red">Invalid last name.</p>
				</ion-item>
				<ion-item>
					<ion-label>Data de Nascimento</ion-label>
					<ion-datetime displayFormat="DD/MM/YYYY" formControlName="dateOfBirth" pickerFormat="DD MM YYYY" min="1920" max="{{year}}">
					</ion-datetime>
				</ion-item>
				<div padding style="text-align: center">
					<button ion-button middle round  class="button-custom" style="width: 100%" type="submit" [disabled]="!userForm.valid">Próximo</button>
				</div>
			</form>
		</ion-col>
	</ion-row>
</ion-grid>  

ts

import { Component } from '@angular/core';
import { NavController, NavParams, ToastController, LoadingController, Loading } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Profile } from '../../models/profile/profile.interface';
import { DataProvider } from '../../providers/data/data';
import { AuthProvider } from '../../providers/auth/auth';
import { Subscription } from 'rxjs/Subscription';
import { User } from 'firebase/app';

@Component({
  selector: 'profile-view',
  templateUrl: 'profile-view.html'
})
export class ProfileViewComponent {

	public credentials;
	private userForm: FormGroup;
    firstName: AbstractControl;
    lastName: AbstractControl;
    dateOfBirth: AbstractControl;
	private authenticatedUser$: Subscription;
	private authenticatedUser: User;
	public loading:Loading;
	public year = null;
	public currentTime = null;

	profile = {} as Profile;	
 
  	constructor(
		private formBuilder: FormBuilder,
		private authProvider: AuthProvider,
		private data: DataProvider,
		private navCtrl: NavController,
	    private loadingCtrl: LoadingController,
		private navParams: NavParams,
		private toast: ToastController,
		) {

		this.loading = this.loadingCtrl.create();
		this.loading.present();
		this.getCurrentYear();
		this.userForm = this.formBuilder.group({
			firstName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])],
			lastname: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])],			
			dateOfBirth: [null, Validators.compose([Validators.required])],
		});
		this.credentials = this.navParams.get("credentials");
		this.loading.dismiss();
	}

	getCurrentYear() {
		this.currentTime = new Date();
		this.year = this.currentTime.getFullYear();
		console.log(this.year);
	}

	ionViewDidLoad() {}

	async saveProfile() {
		try {
			this.loading = this.loadingCtrl.create();
			this.loading.present();
			this.profile = this.userForm.value;
			await this.authProvider.createUserWithEmailAndPassword(this.credentials);
			await this.authProvider.getAuthenticatedUser().subscribe((user: User) => {
				this.authenticatedUser = user;
			}); 

			if (this.authenticatedUser) {
				await this.data.saveProfile(this.authenticatedUser, this.profile);	
			}
			this.navCtrl.setRoot('TabsPage');
			this.loading.dismiss();
			this.displayMsg("Olá " + this.profile.firstName + " :)");
		}
		catch(e) {
			this.displayMsg(e);
		}
		
	}

	// SHOW TOAST MSG
	displayMsg(msg: string){
		this.toast.create({
			message: msg,
			duration: 2500
		}).present();
	}
}

And I’m getting this error:

ProfileViewComponent.html:16 ERROR TypeError: Cannot read property ‘valid’ of undefined

I guess that the error is at ‘!userForm.valid’:

<button ion-button middle round  class="button-custom" style="width: 100%" type="submit" [disabled]="!userForm.valid">Próximo</button>

But I don’t know why!

Posts: 1

Participants: 1

Read full topic

@gmlopez wrote:

Hi,
I’ve already started my journey with ionic and I’m stuck with cordova integration. It is my understanding that during project creation at some point the ionic cli should suggest cordova integration through the following question:

“Would you like to integrate your new app with Cordova to target native iOS and Android?”

However this is not ever prompted.

Here you have some information about the environment setup

Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.1.1
@angular-devkit/build-angular : 0.13.6
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.6
@ionic/angular-toolkit : 1.4.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 6.2.3
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

Android SDK Tools : 26.1.1
NodeJS : v8.12.0 (/usr/bin/node)
npm : 6.4.1
OS : Linux 4.15

Any help will be highly appreciated!

Thanks in advance,
Guillermo

Posts: 1

Participants: 1

Read full topic

@mateusscheper wrote:

Hi!
I’m trying to print variables from my JSON but it’s returning a blank page.

My products.php gets values from my MySQL db and return this:
{"products":[{"id":"1","name":"Arroz"},{"id":"2","name":"Feij?o"},{"id":"3","name":"Batata"},{"id":"4","name":"Leite"}]}

For a better view:

{
"products": [
	{
		"id":"1",
		"name":"Arroz"
	},
	{
		"id":"2",
		"name":"Feij?o"
	},
	{
		"id":"3",
		"name":"Batata"
	},
	{
		"id":"4",
		"name":"Leite"
	}
    ]
}

My products.ts gets those values and my products.html print them:
products.ts:

  loader.present().then(() => {
        this.http.get('http://192.168.1.5/itens/products.php')
        .map(res => res.json())
          .subscribe(data => {
          loader.dismiss()
          console.log(data);
          return data;
          });
    });

I also tried another version (this one worked before, but I edited my products.php a lot because it was not working and now Ionic returns me a blank page):

    loader.present().then(() => {
        this.http.get('http://192.168.1.5/itens/products.php')
        .map(res => res.json())
          .subscribe(data => {
          this.products = data;
          this.products =  Array.of(this.products);
          loader.dismiss()
          return this.products;
          });
    });

products.html:

<ion-list>
   <ion-item *ngFor="let item of products">
     {{ item.id }}
     {{ item.name }}
   </ion-item>
 </ion-list>

console.log:

Posts: 1

Participants: 1

Read full topic

@aitimainc wrote:

I use Ionic Package builds for IOS and Android. When I test my app using TestFlight, it works fine. When I use Over the air distribution from my local server, the app gets installed but the icon is not there and the app does not start. I am using Ionic 4 and testing on an iphone 6S with IOS 12.1.4 and built the OTA distribution using this antenna : https://github.com/soulchild/antenna
Am I missing something ?

Posts: 1

Participants: 1

Read full topic

@ApproTechnologies wrote:

I want to implement customized calendar in ionic4
I am doing it with this link https://github.com/HsuanXyz/ion2-calendar
when put tag
i saw my page blank when remove ion-calendar , page is shown
Please help me to solve
When remove ion-calendar tag

1.png326×518 3.77 KB

when put ion-calendar

2.png322×517 1.01 KB

Posts: 1

Participants: 1

Read full topic

@venkat-chuchu wrote:

In my scenario having checkbox if all checkbox are checked, then ‘any checkbox’ checked by default, that time all the checkbox are unchecked except ‘any checkbox’ but last checkbox was not unchecked. I used the $event for checking or uncheck.

Posts: 1

Participants: 1

Read full topic

@demodesign wrote:

Hello,

I want to sent printing on the network printer. I tried this native plugin https://ionicframework.com/docs/native/printer
but not working

any solution, Please tell me

Posts: 1

Participants: 1

Read full topic

@erwincalata wrote:

getBloodPressure():promise(any)
{
let url = “http://localhost/readbp.php”;
let request = this.http.get(url);
return request.toPromise();
}

error on promise(any)

Posts: 1

Participants: 1

Read full topic