@ratneshshukla wrote:

is there any way by which i can open an external link in app browser from hamburger menu? if yes please explain

Posts: 1

Participants: 1

Read full topic

@nikhil7 wrote:

Hi,
I want inappbrowser to work on dynamic URLs coming from backend.
Currently when I add any single URL, it is working fine.
I want it to be work with dynamic URLs.
Please help with this if anyone knows.

Posts: 1

Participants: 1

Read full topic

@darshan wrote:

I am trying to track when the app is in background and to save latitude and longitude through java api service but i am unable to save the coordinates when app is in background. can we track app in background and call java api?

import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationResponse } from '@ionic-native/background-geolocation';

constructor(private backgroundGeolocation: BackgroundGeolocation) { }

...

const config: BackgroundGeolocationConfig = {
            desiredAccuracy: 10,
            stationaryRadius: 20,
            distanceFilter: 30,
            debug: true, //  enable this hear sounds for background-geolocation life-cycle.
            stopOnTerminate: false, // enable this to clear background location settings when the app terminates
    };

this.backgroundGeolocation.configure(config)
  .then(() => {

    this.backgroundGeolocation.on('location').subscribe((location: BackgroundGeolocationResponse) => {
      console.log(location);

      // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,
      // and the background-task may be completed.  You must do this regardless if your operations are successful or not.
      // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
      this.backgroundGeolocation.finish(); // FOR IOS ONLY
    });

  });

// start recording location
this.backgroundGeolocation.start();

// If you wish to turn OFF background-tracking, call the #stop method.
this.backgroundGeolocation.stop();

Posts: 1

Participants: 1

Read full topic

@shinebalaji wrote:

Hi,
As of now, I am facing issues with devapp connecting my localhost web api base address. I used both localhost and ip address also. Still http response error comes. Please help me

Posts: 1

Participants: 1

Read full topic

@MaBbKhawaja wrote:

can you give me a code to add search bar to my ion list with filtering

Posts: 1

Participants: 1

Read full topic

@leydar wrote:

The build process is failing for gradle.

$ gradle --stacktrace --info --scan
Initialized native services in: /home/user/.gradle/native
Removing 0 daemon stop events from registry
Starting a Gradle Daemon (subsequent builds will be faster)
Starting process 'Gradle build daemon'. Working directory: /home/user/.gradle/daemon/4.4.1 Command: /home/user/tools/jdk1.8.0_131/bin/java -XX:+HeapDumpOnOutOfMemoryError -Xmx1024m -Dfile.encoding=UTF-8 -Duser.country=GB -Duser.language=en -Duser.variant -cp /usr/share/gradle/lib/gradle-launcher-4.4.1.jar org.gradle.launcher.daemon.bootstrap.GradleDaemon 4.4.1
Successfully started process 'Gradle build daemon'
An attempt to start the daemon took 0.396 secs.

FAILURE: Build failed with an exception.

* What went wrong:
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at https://docs.gradle.org/4.4.1/userguide/gradle_daemon.html
Please read the following process output to find out more:
-----------------------

FAILURE: Build failed with an exception.

* What went wrong:
java.lang.ExceptionInInitializerError (no error message)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org


* Try:
Run with --debug option to get more log output. Run with --scan to get full insights.

* Exception is:
org.gradle.api.GradleException: Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at https://docs.gradle.org/4.4.1/userguide/gradle_daemon.html
Please read the following process output to find out more:
-----------------------

FAILURE: Build failed with an exception.

* What went wrong:
java.lang.ExceptionInInitializerError (no error message)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

	at org.gradle.launcher.daemon.bootstrap.DaemonGreeter.parseDaemonOutput(DaemonGreeter.java:34)
	at org.gradle.launcher.daemon.client.DefaultDaemonStarter.startProcess(DefaultDaemonStarter.java:152)
	at org.gradle.launcher.daemon.client.DefaultDaemonStarter.startDaemon(DefaultDaemonStarter.java:135)
	at org.gradle.launcher.daemon.client.DefaultDaemonConnector.doStartDaemon(DefaultDaemonConnector.java:210)
	at org.gradle.launcher.daemon.client.DefaultDaemonConnector.startDaemon(DefaultDaemonConnector.java:204)
	at org.gradle.launcher.daemon.client.DefaultDaemonConnector.connect(DefaultDaemonConnector.java:128)
	at org.gradle.launcher.daemon.client.DaemonClient.execute(DaemonClient.java:138)
	at org.gradle.launcher.daemon.client.DaemonClient.execute(DaemonClient.java:92)
	at org.gradle.launcher.cli.RunBuildAction.run(RunBuildAction.java:51)
	at org.gradle.internal.Actions$RunnableActionAdapter.execute(Actions.java:173)
	at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:291)
	at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:264)
	at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:33)
	at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:24)
	at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:33)
	at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:22)
	at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:257)
	at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:191)
	at org.gradle.launcher.Main.doAction(Main.java:33)
	at org.gradle.launcher.bootstrap.EntryPoint.run(EntryPoint.java:45)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at org.gradle.launcher.bootstrap.ProcessBootstrap.runNoExit(ProcessBootstrap.java:60)
	at org.gradle.launcher.bootstrap.ProcessBootstrap.run(ProcessBootstrap.java:37)
	at org.gradle.launcher.GradleMain.main(GradleMain.java:23)

Posts: 1

Participants: 1

Read full topic

@liarg wrote:

Hi guys,

I’m looking for a solution to read out values from app’s .plist file with given keys. I’ve tried Cordova plugins as

• https://www.npmjs.com/package/cordova-plugin-app-config
• https://www.npmjs.com/package/cordova-plugin-emm-app-config

but it was not expedient, seems to be written for older ionic versions. For example accessing cordova.plugins.EmmAppConfig leads to an error (Property ‘EmmAppConfig’ does not exist on type ‘CordovaPlugins’)

Maybe someone could help me.

Posts: 1

Participants: 1

Read full topic

@nandatiara wrote:

d:\Ionic>npm install -g cordova ionic
npm ERR! path C:\Users\My Acer\AppData\Roaming\npm\node_modules\ionic\node_modules.bin\esgenerate
npm ERR! code EEXIST
npm ERR! Refusing to delete C:\Users\My Acer\AppData\Roaming\npm\node_modules\ionic\node_modules.bin\esgenerate: …/escodegen/bin/esgenerate.js symlink target is not controlled by npm C:\Users\My Acer\AppData\Roaming\npm\node_modules\ionic\node_modules\escodegen
npm ERR! File exists: C:\Users\My Acer\AppData\Roaming\npm\node_modules\ionic\node_modules.bin\esgenerate
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\My Acer\AppData\Roaming\npm-cache_logs\2019-03-22T12_52_07_620Z-debug.log

can you help me to solved my problem?
i can’t create ionic project

Posts: 1

Participants: 1

Read full topic

@Asixel wrote:

Hi everyone!

I have an app written in Ionic 3, and I want in iOS to have the same behavior as in Android regarding the font size.
Atm, on an Android device, if I change the OS/system’s display settings and change the text size, my application automatically adjusts its font size.
On an iOS though, the font size of my application doesn’t change based on the based on the OS’ settings and stays the same.

Is there any easy fix that can be applied to change this?

Below are my scss files if needed:
app.scss:

// http://ionicframework.com/docs/v2/theming/
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
$item-wp-detail-push-show: true;
$item-md-detail-push-show: true;

.homeLogoNavBar {
  height: 70%;
}

.old-browser-info {
  display: none;
}

ion-label {
  white-space: normal;
}

/*

// Menu user profile
.user-profile {
  .user-avatar {
    width: 68px;
    height: 68px;
    display: inline-block;
    border-radius: 50%;
    box-shadow: inset 0 0 10rem rgba(0,0,0,.25), 0 0 4rem rgba(255,255,255,.45);
    img {
      border-radius: 50%;
    }
  }
  .toolbar-background {
    background-image: linear-gradient(135deg, color($colors, primary), color($colors, primary));
  }

  .other-data {
    .column {
      &:first-child {
        border-right: 1px solid rgba(36, 50, 157, .25);
      }
    }
  }
}
*/

/*
#smallButton {
  width: 50%;
}*/

// For wrapping text in the alert radio labels/options
.alert-md .alert-radio-label {
  white-space: pre-wrap;
}
.alert-ios .alert-radio-label {
  white-space: pre-wrap;
}
.alert-wp .alert-radio-label {
  white-space: pre-wrap;
}

.doctor-checkin-popover-email .popover-content {
  width: 95%;
}

.toolbar-title {
  white-space: normal;
}

ion-toolbar[color="secondary"] {
  .toolbar-content {
    color: #fff !important;
  }
}

ion-toolbar[color="primary"] {
  * {
    // font-weight: bold;
    // color: #fff !important;
    font-size: 1.6rem;
  }
  // color: #fff !important;
  font-size: 1.6rem;
  color: $contrast-with-primary-text-color;
  background-color: $primary;
  .select-ios,
  .select-md,
  .select-icon .select-icon-inner {
    color: #fff;
  }
  .select-placeholder.select-text {
    font-weight: bold;
  }
  .bar-button-secondary-ios,
  .bar-button-default.bar-button-ios-secondary,
  .bar-button-clear-ios-secondary,
  .ion-button.secondary {
    color: $contrast-with-primary-text-color !important;
    font-weight: bold;
  }
}

.segment-md .segment-button,
.segment-ios .segment-button {
  color: $text-color;
  &.segment-activated,
  &.activated {
    color: $contrast-with-primary-text-color;
    background: $primary;
  }
}

ion-item {
  &.item-input .item-inner {
    border-bottom: 0.55px solid #c8c7cc !important;
  }
  &.item-input.input-has-focus .item-inner {
    border-bottom: 0.55px solid $primary !important; // border-width: 2px;
  }
}

ion-card.card-md {
  ion-list {
    padding-bottom: 0;
  }
}

.image-icon {
  height: 2em;
  &.large {
    height: 4em;
  }
  width: auto;
  text-align: center;
  margin: 0.5em auto;
  /* padding: 5px; */
}

.toolbar-ios,
.toolbar-md,
.toolbar-wp {
  padding: 0;
}

ion-toolbar + img {
  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);
}

;
ion-list-header .full {
  max-width: 100% !important;
}

ion-menu[type=overlay] {
  opacity: 1;
}

a[disabled],
button[disabled],
[ion-button][disabled] {
  cursor: default;
  opacity: .2;
  pointer-events: none;
}

#iframe {
  display: none;
}

.platform-browser {
  #iframe {
    display: block;
  }
  #no-iframe {
    display: none;
  }
}

.swiper-pagination-bullet-active {
  background: $primary;
}

@media (min-width: 768px) {
  .ion-page {
    margin-left: 30%;
    width: 70%;
  }
  ion-menu {
    width: 30%;
    display: block;
  }
  .bar-button-menutoggle {
    display: none;
  }
  ion-menu ion-backdrop {
    display: none;
  }
  ion-content {
    border-left: none;
  }
  ion-menu[type=overlay] .menu-inner {
    -webkit-transform: translateX(0px) !important;
    transform: translateX(0px) !important;
    box-shadow: none;
    width: 100%;
  }
}

/*
 * Components Cards page style
 */

.card-background-page {
  ion-card {
    position: relative;
    text-align: center;
  }
  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }
  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }
}

h1.as-header-icon {
  text-align: center;
}

h1.as-header-icon ion-icon {
  font-size: 6em;
}

/*
 * Components Grid page style
 */

.grid-page {
  ion-col {
    padding: 0;
  }
  ion-col div {
    background-color: #F9FAFB;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    text-align: center;
  }
}

/*
 * Components Icons page style
 */

.icons-page {
  ion-icon {
    font-size: 50px;
  }
  ion-row {
    height: 100%;
    flex-wrap: wrap;
  }
  ion-col {
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    padding: 10px 5px;
  }
}

/*
 * Components Avatar List page style
 */

.avatar-list-page {
  ion-note {
    font-size: 12px;
    align-self: flex-start;
    margin-top: 14px;
  }
}

.back-button-icon {
  color: $primary;
}

.list-header,
.tile.card {
  // background: $primary ;
  // color: #fff !important;
}

.tile.card-content {
  padding: 0;
}

.header-bg {
  background: $primary !important;
  color: #fff !important;
  .select-icon-inner,
  .select-placeholder,
  ion-label,
  ion-select {
    color: #fff !important;
  }
}

ion-list-header.color-secondary {
  background: $secondary !important;
  color: #fff !important;
}

.list-header-md,
.list-md-header {
  margin-bottom: 0;
}

.tile {
  .label {
    margin: 0;
  }
  .item,
  .item h1,
  .item h2,
  .label {
    // background:  $primary !important;
    // color: #fff !important;
  }
  .item h1 {
    font-size: 4.5rem;
    padding: 0;
  }
  .h2 {
    padding: 0 !important;
  }
}

.scroll-x.row {
  overflow-x: scroll;
  flex-wrap: nowrap;
}

h1 + h3 {
  margin-top: -15px;
}

::-webkit-scrollbar {
  width: 0;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
  display: none;
}

ion-col {
  min-width: 150px;
  padding: 0;
}

/*
.card-content-md{
	background:  $toolbar-background !important;

}
*/

ion-header img.title-image {
  max-height: 2em;
  width: auto;
}

.swiper-slide {
  overflow-y: scroll;
  display: block;
}

.quick-action.card {
  background: $secondary;
  color: #fff;
  margin-bottom: 2px;
}

.hello-title {
  width: 100%; //   height: 1000px;
  position: relative;
  overflow: hidden;
  /* Enable GPU Rendering */
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.blur {
  /* All the background image supports */
  transform: translate(0px, 0px, 0px);
  background-image: -webkit-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
  background-image: -moz-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
  background-image: -o-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
  background-image: linear-gradient(to top right, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
  position: absolute;
  width: 100%;
  height: 100%;
  /* blur filters */
  -webkit-filter: blur(20px);
  -o-filter: blur(20px);
  filter: blur(20px);
  /* positioning and removing edges */
  top: -70px;
  right: -70px;
  left: -70px;
  padding: 70px;
}

.blur:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1001;
  /* Setting the gradient. Adds depth, and glass like effect. */
  background-image: -webkit-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
  background-image: -moz-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
  background-image: -o-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
  background-image: linear-gradient(-19deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
  /* Blur to add depth. High to create smooth transition */
  -webkit-filter: blur(70px);
  -o-filter: blur(70px);
  filter: blur(70px);
}

.ios ion-list > .item-wrapper:last-child .item,
.ios ion-list > .item:last-child,
.md ion-list > .item-wrapper:last-child .item,
.md ion-list > .item:last-child,
.wp ion-list > .item-wrapper:last-child .item,
.wp ion-list > .item:last-child {
  border-bottom: none;
}

.card {
  margin-bottom: 20px;
}

#map {
  width: 100%;
  bottom: 0px;
  top: 0px;
  display: block;
  height: auto;
  position: absolute !important;
}

@media (min-width: 768px) {
  ion-modal .ion-page {
    margin-left: 0;
    width: 100%;
  }
}

.swiper-pagination-progress .swiper-pagination-progressbar {
  background: #ed1c24;
}

.menu-inner {
  .toolbar-background {
    border: none !important;
  }
  button {
    padding-right: 30px;
    padding-left: 0px;
  }
  li,
  a,
  .label {
    padding-left: 16px;
  }
  .item-divider {
    font-weight: bold;
    padding-right: 30px;
    padding-left: 0px;
    .item-inner {
      text-transform: uppercase;
      border-bottom: 1px solid #c8c7cc;
    }
  }
}

.menu-inner .item-divider-md {
  border-bottom: 0px;

}

[font-bold] *, [font-bold], [font-bold] ion-label, page-checkin [font-bold] ion-label, page-checkin .radio-group [font-bold] ion-label {
  font-weight: bold !important;
}


/*iOS Burger Menu Bugfix
https://github.com/ionic-team/ionic/issues/13062 */
@media only screen and (max-width: 767px) {
  .toolbar-ios.statusbar-padding:first-child {
    padding-top: calc(0px + 4px);
    min-height: calc(44px + 0px);
  }

  .toolbar-ios.statusbar-padding:first-child ion-title {
    padding-top: 0px;
    height: calc(44px + 0px);
    min-height: calc(44px + 0px);
  }
}

.toolbar-title-ios {
  margin-bottom: -3px;
}

variables.scss:

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$linear-color-change: rgba(239, 123, 0, 0.54);
$linear-color2-change: rgba(239, 123, 0, 1);
$linear-color3-change: rgba(239, 125, 0, 1);

$contrast-with-primary-text-color: #ffffff;
$text-color: #5b5b5b;
$background-color: #f8f9fa;
$toolbar-background: #ffffff;
$primary: #EF7D00;
$secondary: #d0cdcd;
//$grey: #9d9e9e69;

$item-md-detail-push-show: true;
$item-wp-detail-push-show: true;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: ( primary: $primary, secondary: $secondary, danger: #f53d3d, light: #f4f4f4, dark: #222, corporate: ( base: #fecc36, contrast: #ffffff), favorite: #69BB7B, white: #FFFFFF, facebook: #3B5999, googleplus: #DD4C39, bgColor: #F7F7F7, text-color: $text-color);
$list-background-color: #fff;
// $toolbar-background: #E0B41A;
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/
$ionicons-font-path: "../assets/fonts";
@import "ionicons";
$card-ios-margin-bottom: 4px;
$card-ios-margin-left: 4px;
$card-ios-margin-right: 4px;
$card-ios-margin-top: 4px;
$card-md-margin-bottom: 4px;
$card-md-margin-left: 4px;
$card-md-margin-right: 4px;
$card-md-margin-top: 4px;
$card-wp-margin-bottom: 4px;
$card-wp-margin-left: 4px;
$card-wp-margin-right: 4px;
$card-wp-margin-top: 4px;
$progress-bar-color: #EF7D00;
$toolbar-ios-button-color: $text-color;
$alert-ios-button-text-color:$text-color;
$alert-md-button-text-color:$text-color;
$item-ios-detail-push-color: $primary;
$item-md-detail-push-color: $primary;
// $button-md-clear-text-color: $text-color;
// $button-ios-clear-text-color: $text-color;


$segment-button-ios-background-color-activated: 	$primary;
$segment-button-md-background-color-activated: 	$primary;
$segment-button-ios-text-color: $text-color;
$segment-button-md-text-color: $text-color;

/*
// Material Design Dark Theme
// ----------------------------------

$colors-md: copy-colors($colors) !default;


$text-md-color:                       $text-color !default;
$background-md-color:                 $background-color !default;
$subdued-text-md-color:               $subdued-text-color !default;

$font-family-md-base:                 "Roboto", "Helvetica Neue", sans-serif !default;
$font-size-md-base:                   $font-size-base !default;


// Material Design Outer content
// --------------------------------------------------
$outer-content-md-background-color:   $background-color !default;


// Material Design Toolbar
// --------------------------------------------------

$toolbar-md-background:               $toolbar-background !default;
$toolbar-md-border-color:             $toolbar-border-color !default;
$toolbar-md-text-color:               #fff !default;
$toolbar-md-active-color:             $toolbar-active-color !default;
$toolbar-md-inactive-color:           $toolbar-inactive-color !default;


// Material Design Tabs
// --------------------------------------------------

$tabs-md-background:                  $tabs-background !default;
$tabs-md-tab-color-inactive:          $tabs-tab-color-inactive !default;
$tabs-md-tab-color-active:            $tabs-tab-color-active !default;


// Material Design Card
// --------------------------------------------------

$card-md-header-color:                #ddd !default;
$card-md-title-text-color:            #fff !default;
$card-md-text-color:                  #ddd !default;


// Material Design List
// --------------------------------------------------

$list-md-text-color:                  $list-text-color !default;
$list-md-border-color:                #dedede !default;
$list-md-background-color:            $list-background-color !default;
$list-md-activated-background-color:  #d9d9d9 !default;


// Material Design Item
// --------------------------------------------------

$item-md-padding-top:                 13px !default;
$item-md-padding-right:               16px !default;
$item-md-padding-bottom:              13px !default;
$item-md-padding-left:                16px !default;
$item-md-padding-media-top:           9px !default;
$item-md-padding-media-bottom:        9px !default;
$item-md-padding-icon-top:            11px !default;
$item-md-padding-icon-bottom:         10px !default;
$item-md-divider-background:          #151515 !default;
$item-md-divider-color:               #f4f4f4 !default;


// Material Design Toggle
// ---------------------------------------------------
$toggle-md-handle-background-color-off: #f4f4f4 !default;


// Ripple Color
// --------------------------------------------------

@function ripple-background-color($button-color) {
  @return rgba(red($button-color), green($button-color), blue($button-color), .1);
}
*/


$button-md-box-shadow	:none;
$radio-md-color-on: 	#5b5b5b;
$radio-ios-color-on: 	#5b5b5b;
$checkbox-md-color-on: 	#5b5b5b;
$checkbox-ios-color-on: 	#5b5b5b;
$text-input-placeholder-color: #5b5b5b;
$select-md-placeholder-color: $contrast-with-primary-text-color;
$select-ios-placeholder-color: $contrast-with-primary-text-color;
$select-wp-placeholder-color: $contrast-with-primary-text-color;

$checkbox-ios-icon-checkmark-color: $contrast-with-primary-text-color;
$checkbox-md-icon-checkmark-color: $contrast-with-primary-text-color;
$checkbox-wp-icon-checkmark-color: $contrast-with-primary-text-color;

Posts: 1

Participants: 1

Read full topic

@andrea-alfanet wrote:

Hello,
I am trying to create multi stores where different merchants should sell their products and each merchant must use his own PayPal account.
I would like to jump in the PayPal form with checkout data and merchant id as well in order to get the payment in the correct merchant id for each store.

In a desktop web site I used the below action post for each merchant and it works fine:

action: “https://www.paypal.com/it/cgi-bin/webscr”
param1: name=business and value=“xxxxxxx”
param2: …
etc…

In ionic3 I’m trying to use a new PayPal javascript sdk.

1 - I call my client ID in the index.html header as below:
2 - In the PayPal button I tried to pass the merchant id of each store in the payee command but PayPal, but I get an error: Pass merchant-id=“XYZ” in the PayPal script tag. Pass merchant-id=unknown if you do not have access to the merchant id. Obviously I have the merchant id that I pass in the payee command as you can see in the below script. Where am I wrong?

below my button script:

initPayPal() {
var _totaleOrdine = this.totaleOrdine.toString();

var _merchant: string = 'XXXXXXXXX';

  paypal.Buttons({
    env: 'sandbox', // sandbox | production
      locale: 'it_IT',

      //ref: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/
    style: {
        size: 'responsive',
        color: 'gold',
        shape: 'pill',
        label: 'buynow', //                    label: checkout, buynow, credit, pay, paypal
        tagline: false

      },

    commit: true,
    debug: true,

     createOrder: function(data, actions) {
      // Set up the transaction
        console.log(data);
        console.log(actions);

        return actions.order.create({

        application_context: {
            brand_name: "MyBrand",
        },


        purchase_units: [{

     //   reference_id:_merchant,

          amount: {
            value: _totaleOrdine,
          },

          payee: {
            email: 'merchant2@mydomain.it',
            merchant_id: 'xxxxx'
          },

          shipping: {
            address: {

                address_line_1: "Via Roma 10",
                address_line_2: "",
                admin_area_2: "Roma",
                admin_area_1: "RM",
                postal_code: "00100",
                country_code: "IT",

            },

            name:{
                full_name: "adam adami"
            },
          },

        }],
});
},
     onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        alert('Transaction completed by ' + details.payer.name.given_name);
       console.log(details);
        // Call your server to save the transaction
        return fetch('/paypal-transaction-complete', {
          method: 'post',
          body: JSON.stringify({
            orderID: data.orderID
          })
        });
        //
      });

    },

     onCancel: function(data, actions) {
        /*
         * Buyer cancelled the payment
         */
         console.log("Buyer cancelled the payment");
      },

     onError: function(err) {
        /*
         * An error occurred during the transaction
         */
         console.log(err);
         console.log("An error occurred during the transaction");
      }

  }).render(this.paypalbuttoncontainer2);

Posts: 1

Participants: 1

Read full topic

@Splinteer wrote:

Hello,

I want my ion-refresher to be inside a subcontainer.
Because I have a image used as background but is in div with position absolute because I can’t add filter and the edit I want with a background-image.

The problem is that when I try to refresh my app. Even if it’s inside the subcontent it add a block in top of the image I used as a background.

Here is my code:

<ion-content>
  <img class="lastpic" src="{{user.lastpic}}">
  <div class="subcontent">
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content refreshingSpinner="dots"></ion-refresher-content>
    </ion-refresher>
    <div class="header">
      <div>
        <img class="profilpic" src="{{user.profilepic}}">
      </div>
    </div>
  </div>
</ion-content>

.lastpic {
  position: absolute;
  z-index: 1;
  mask-image: linear-gradient(to bottom, rgba(var(--ion-color-dark-rgb, 14,21,27),1) 0%, rgba(var(--ion-color-dark-rgb, 14,21,27),0) 75%);
  opacity: 0.7;
}

.subcontent {
  position: absolute;
  z-index: 2;

  .header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(60px, auto);
    box-sizing: border-box;
    padding: 10px;
    align-items: center;
    text-align: center;
    img.profilpic {
      width: 100px;
      border-radius: 100%;
    }
  }
}

Posts: 1

Participants: 1

Read full topic

@AdamGelineau wrote:

Hey guys,

I’m trying to open a Popover page, but it’s always showing at the middle of the screen. I think it’s because the button I click isn’t an ion component in the html file, but a Google maps marker in my ts file.

google.maps.event.addListener(friendMarker, 'click', (event) => {
    that.presentPopover(event, friendMarker, oneFriend)
});

So, I listen to the click event on my Maps marker, and when I click on it, I open my Popover page, just like this:

presentPopover(ev, friendMarker, oneFriend) {
    this.map.panTo(friendMarker.position);
    let popover = this.popoverCtrl.create(ContactPopoverPage, {friend: oneFriend});
    popover.present({
        ev: ev
    });
}

Unfortunately, I think my event isn’t the one the Popover page is waiting for… Because the popover just pop without the arrow and is always right in the middle of the screen.

So the question is : Do you guys know how to pass the right event to my Popover page from my ts file ?

Thanks mates !

Posts: 1

Participants: 1

Read full topic

@diolps wrote:

const routes: Routes = [
          {path: '', redirectTo: 'home', pathMatch: 'full'},
          {path: 'home', loadChildren: './home/home.module#HomePageModule',outlet:'primary'},
          {path: 'apple', loadChildren: './apple/apple.module#ApplePageModule', outlet: 'apple'},
          {path: 'banana', loadChildren: './banana/banana.module#BananaPageModule', outlet: 'banana'}
        ];

template:

     <ion-router-outlet main name = "primary"> </ ion-router-outlet>
      <ion-router-outlet name = "banana"> </ ion-router-outlet>
      <ion-router-outlet name = "apple"> </ ion-router-outlet>

I need to have each module loaded in a different outlet, I’ve researched it in several places but it seems that the issue https://github.com/ionic-team/ionic/issues/16619 that refers to this problem is closed but not I managed to solve using the version that supposedly would solve the problem of the ionic / angular .18 beta.

Does anyone have any examples of multiple routes with outlets named Ionic 4 or can you give me a light on why it does not recognize the outlets (banana and apple, it only renders the home) and neither does it change the routes?

Posts: 1

Participants: 1

Read full topic

@irvingprog wrote:

Hi Everyone.

I’m experiencing an issue while using ion-fab-button and Angular’s [routerLink].

When I press the ion-fab-button on either Phone or browser i get an orange frame around.

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button [routerLink]="['/test']">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

I could fix this by using (click) event instead of routerLink for going to another page.

Ionic:

   ionic (Ionic CLI)             : 4.10.2
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2ugin-ionic-webview 3.1.2, (and 9 other plugins).1.3, cordova-pl

System:

   NodeJS : v11.9.0
   npm    : 6.5.0
   OS     : Linux 4.15

Perhaps related: Rounded button click issue

Posts: 1

Participants: 1

Read full topic

@sysmodesenvolvimento wrote:

Hello guys.

I’m trying to generate an apk using the command:

ionic cordova build android

And is returning the following error:

:generateDebugAssets
:mergeDebugAssets

:transformClassesWithDexForDebug
Dex: Error converting bytecode to dex:
Cause: Dex cannot parse version 52 byte code.
This is caused by library dependencies that have been compiled using Java 8 or above.
If you are using the 'java' gradle plugin in a library submodule add
targetCompatibility = '1.7'
sourceCompatibility = '1.7'
to that submodule's build.gradle file.
    UNEXPECTED TOP-LEVEL EXCEPTION:
java.lang.RuntimeException: Exception parsing classes
        at com.android.dx.command.dexer.Main.processClass(Main.java:775)
        at com.android.dx.command.dexer.Main.processFileBytes(Main.java:741)
        at com.android.dx.command.dexer.Main.access$1200(Main.java:88)
        at com.android.dx.command.dexer.Main$FileBytesConsumer.processFileBytes(Main.java:1683)
        at com.android.dx.cf.direct.ClassPathOpener.processArchive(ClassPathOpener.java:284)
        at com.android.dx.cf.direct.ClassPathOpener.processOne(ClassPathOpener.java:166)
        at com.android.dx.cf.direct.ClassPathOpener.process(ClassPathOpener.java:144)
        at com.android.dx.command.dexer.Main.processOne(Main.java:695)
        at com.android.dx.command.dexer.Main.processAllFiles(Main.java:592)
        at com.android.dx.command.dexer.Main.runMonoDex(Main.java:321)
        at com.android.dx.command.dexer.Main.run(Main.java:292)
        at com.android.builder.internal.compiler.DexWrapper.run(DexWrapper.java:54)
        at com.android.builder.core.DexByteCodeConverter.lambda$dexInProcess$0(DexByteCodeConverter.java:173)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at java.lang.Thread.run(Thread.java:748)
Caused by: com.android.dx.cf.iface.ParseException: bad class file magic (cafebabe) or version (0034.0000)
        at com.android.dx.cf.direct.DirectClassFile.parse0(DirectClassFile.java:476)
        at com.android.dx.cf.direct.DirectClassFile.parse(DirectClassFile.java:406)
        at com.android.dx.cf.direct.DirectClassFile.parseToInterfacesIfNecessary(DirectClassFile.java:388)
        at com.android.dx.cf.direct.DirectClassFile.getMagic(DirectClassFile.java:251)
        at com.android.dx.command.dexer.Main.parseClass(Main.java:787)
        at com.android.dx.command.dexer.Main.access$1600(Main.java:88)
        at com.android.dx.command.dexer.Main$ClassParserTask.call(Main.java:1722)
        at com.android.dx.command.dexer.Main.processClass(Main.java:773)
        ... 16 more

1 error; aborting

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: java.lang.RuntimeException: java.lang.RuntimeException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException: Return code 1 for dex process

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
 FAILED

BUILD FAILED

Total time: 29.091 secs
Error: cmd: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Dex: Error converting bytecode to dex:
Cause: Dex cannot parse version 52 byte code.
This is caused by library dependencies that have been compiled using Java 8 or above.
If you are using the 'java' gradle plugin in a library submodule add
targetCompatibility = '1.7'
sourceCompatibility = '1.7'
to that submodule's build.gradle file.
    UNEXPECTED TOP-LEVEL EXCEPTION:
java.lang.RuntimeException: Exception parsing classes
        at com.android.dx.command.dexer.Main.processClass(Main.java:775)
        at com.android.dx.command.dexer.Main.processFileBytes(Main.java:741)
        at com.android.dx.command.dexer.Main.access$1200(Main.java:88)
        at com.android.dx.command.dexer.Main$FileBytesConsumer.processFileBytes(Main.java:1683)
        at com.android.dx.cf.direct.ClassPathOpener.processArchive(ClassPathOpener.java:284)
        at com.android.dx.cf.direct.ClassPathOpener.processOne(ClassPathOpener.java:166)
        at com.android.dx.cf.direct.ClassPathOpener.process(ClassPathOpener.java:144)
        at com.android.dx.command.dexer.Main.processOne(Main.java:695)
        at com.android.dx.command.dexer.Main.processAllFiles(Main.java:592)
        at com.android.dx.command.dexer.Main.runMonoDex(Main.java:321)
        at com.android.dx.command.dexer.Main.run(Main.java:292)
        at com.android.builder.internal.compiler.DexWrapper.run(DexWrapper.java:54)
        at com.android.builder.core.DexByteCodeConverter.lambda$dexInProcess$0(DexByteCodeConverter.java:173)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at java.lang.Thread.run(Thread.java:748)
Caused by: com.android.dx.cf.iface.ParseException: bad class file magic (cafebabe) or version (0034.0000)
        at com.android.dx.cf.direct.DirectClassFile.parse0(DirectClassFile.java:476)
        at com.android.dx.cf.direct.DirectClassFile.parse(DirectClassFile.java:406)
        at com.android.dx.cf.direct.DirectClassFile.parseToInterfacesIfNecessary(DirectClassFile.java:388)
        at com.android.dx.cf.direct.DirectClassFile.getMagic(DirectClassFile.java:251)
        at com.android.dx.command.dexer.Main.parseClass(Main.java:787)
        at com.android.dx.command.dexer.Main.access$1600(Main.java:88)
        at com.android.dx.command.dexer.Main$ClassParserTask.call(Main.java:1722)
        at com.android.dx.command.dexer.Main.processClass(Main.java:773)
        ... 16 more

1 error; aborting

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: java.lang.RuntimeException: java.lang.RuntimeException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException: Return code 1 for dex process

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

[ERROR] An error occurred while running cordova build android (exit code 1).

I had already tried to update and downgrade in many versions the ionic, cordova, npm, gradle and dependencies of the project. Follow the ionic info:

$ ionic info

cli packages: (C:\Users\<user>\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Android\sdk

Misc:

    backend : pro

Posts: 1

Participants: 1

Read full topic

@flvrm92 wrote:

I am building an PWA application using Ionic 3 (without cordova plugin) and now i need to implement a recovery password feature. To do that i need to send an email to user with a link, when the user click in link i need to redirect him to a page with a token to recovery that password.

I have tried to implement this feature using IonPage segment, as you can see below.

@IonicPage({
  segment: 'token/:token'  
})

Calling the follow Url http://localhost:8100/#/token/mytoken i’m redirect to root page (login)

How can i do that ?

Posts: 1

Participants: 1

Read full topic

@BrentAshWilliams wrote:

Hello,

I currently have an ion-select with options that have fairly long text. The text does not wrap.

After looking at various posts I have tried putting the following within my app.scss:

.alert-md .alert-radio-label {
white-space: normal !important;
}

When I launch my app in chrome inspector and highlight the ion-select option (it is not wrapping) I see the following in chrome inspector for my main.css.

.alert-md .alert-radio-label {
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
color: initial;
padding: 13px 26px;
}

I can change the nowrap to normal in chrome inspector and the ion-select options wrap like I want.

Can someone help to properly override the .alert-md .alert-radio-label properties?

Thanks!

Posts: 2

Participants: 1

Read full topic

@egaldamez wrote:

Hello everyone, im having a issue with a form i have a field called “puntoscanje”, the user can modify this field entering a number, i need to check the number the user set after changes had done in the field and then calculate a 2nd field, im trying to do it with a function to set the value BUT, sometimes it work sometimes it dont.
For example:
If the max value is 170, and the user writes down 200 it verifies each number like this:
2>170
20>170
200>170 and it sets the value to 170.

BUT if i type on the input 170 first, and then another number like 1702 and so on. its not changing.

Page ts.

import { Component, OnInit } from '@angular/core';

import { Storage } from '@ionic/storage';
import { GetService } from '../../get.service';

@Component({
  selector: 'app-canjepuntos',
  templateUrl: './canjepuntos.page.html',
  styleUrls: ['./canjepuntos.page.scss'],
})
export class CanjepuntosPage implements OnInit {
  points: any;
  puntoscanje: any;
  descuento: any;
  pcanje: any;

  constructor(private storage: Storage,) { 
    this.storage.get('Puntos').then((val) => {
      this.points = parseInt(val);
      //console.log('Your Name is', val);
    });
   }

  myFunction() {
    console.log(this.puntoscanje);
    if( this.puntoscanje > this.points){
      this.puntoscanje = this.points;
    }
      var PuntosDescto = 10 ;
      var calculo = ( this.puntoscanje / PuntosDescto).toFixed(2);
      this.descuento = calculo;        
  }

  ngOnInit() {
  }

}

HTML

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Canje de Puntos</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <form  #form="ngForm" (ngSubmit)="register(form)">
    <ion-grid>
      <ion-row justify-content-center>
        <ion-col align-self-center>
          <div padding class="form-inputs">
            <ion-item  >
                <ion-label position="stacked" style="text-align: center;">Puntos Acumulados</ion-label>
                <ion-input type="text" name="acumulados" [(ngModel)]="acumulados" value="{{points}}" readonly style="text-align: center;"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked" style="text-align: center;">Puntos a Canjear</ion-label>
              <ion-input type="number" inputmode="numeric" id="puntoscanje" name="puntoscanje" autofocus="true" [(ngModel)]="puntoscanje" style="text-align: center;" min="0" max="{{points}}" (ionChange)="myFunction()" ></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked" style="text-align: center;">descuento</ion-label>
              <ion-input type="number" inputmode="numeric" id="descuento" name="descuento" [(ngModel)]="descuento" style="text-align: center;" max="{{points}}" ></ion-input>
            </ion-item>
            
            
          </div>
          <div style="padding-top:100px">
          <ion-button style="width:150px; height: 50px; margin: auto; " expand="block" (click)="Login()" >Canjear</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </form>
</ion-content>

And i need to set the value to Descuento field when the “puntoscanje” is set.
Im new to ionic but im trying my best.

Thanks in advance to everyone

Posts: 1

Participants: 1

Read full topic

@morphist wrote:

Hey guys, I was checking our “prod” build for Ionic 3 built PWA today and noticed the following in the devtools:

Somehow src files and other node_modules content got into www folder that was built using ‘npm run build --prod’ command.

I double checked our package.json and tsconfig.json and found nothing that would stand out:

So I wonder whats wrong and why would typescript make it into webpack built js files;/ ?

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "strict": false,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": "./src"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Posts: 2

Participants: 1

Read full topic

@RiodaJS wrote:

Hi, I debug my app and can find that local fonts, .json translate and a image is loading after 35 seconds, how can i make that the app init without load this resources?

Posts: 1

Participants: 1

Read full topic