Hi! If someone has any clue regarding me issue please, please, please help as I am struggling with this apparently basic thing for 2 days. I am going crazy.

This is the design I wanted to achieve:

Screenshot 2020-07-06 at 11.48.49672×1438 40.7 KB

I achieved this using the code below. And it works but the problem is that inspecting the element the first CSS it has a fade effect or it’s slower than the other one and it has a strange behaviour + plus square borders. If anyone has any clue from what that is that would be amazing. Thanks a lot!

**My problem is that I can add a background to the checked input only if I add : .item-radio-checked { background-color: var(--ion-color-secondary); } AND &.item-radio-checked { --ion-item-background: var(--ion-color-secondary); --ion-item-color: var(--ion-color-light); } the second one is inside of .question-option.

The effect I mentioned above:
first when I press the button for a second and after becomes entirely black

Screenshot 2020-07-03 at 17.47.44712×810 11.8 KB

Screenshot 2020-07-03 at 17.47.50684×792 6.99 KB

Screenshot 2020-07-06 at 11.18.132880×1598 1000 KB

Screenshot 2020-07-06 at 12.20.462880×1596 999 KB

This is my HTML

<ion-content class="ion-padding">
  <form [formGroup]="spqForm">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div class="quiz-header">
            <ion-text class="small">QUESTION 1 OUT OF 10</ion-text>
            <h2>
              What is your primary concern?
            </h2>
          </div>

          <div class="quiz-choices">
            <ion-list lines="none">
              <ion-radio-group formControlName="spq">
                <ion-item class="question-option">
                  <ion-label class="choices-label">N</ion-label>
                  <ion-radio slot="end" value="n"></ion-radio>
                </ion-item>
           </ion-radio-group>
            </ion-list>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

This is the CSS

ion-item {
  border: 1px solid #eeeff0;
  border-radius: 16px;
  height: 64px;
  text-indent: 20px;
  --background-activated: transparent;
  --ripple-color: transparent;
}

ion-label {
  font-size: 10.72 px;
  font-weight: 500;
  color: var(--ion-color-secondary);
  margin-top: 20px;
  margin-bottom: 5px;
}

.quiz-header {
  text-align: center;
  margin-top: 20%;
  h2 {
    font-weight: 700;
  }
}

.quiz-choices {
  margin-top: 15%;
}

.item-radio-checked {
  background-color: var(--ion-color-secondary);
}

.question-option {
  --padding-start: 0px;
  --ion-item-color: var(--ion-color-secondary);
  --inner-border-width: 0px;
  --inner-padding-end: 0px;

  text-align: left;

  &:not(:last-child) {
    margin-bottom: 2.5%;
  }

  &.item-radio-checked {
    --ion-item-background: var(--ion-color-secondary);
    --ion-item-color: var(--ion-color-light);
  }

  ion-radio {
    --color-checked: var(--ion-color-light);
    margin-bottom: 0px;
    margin-right: 20px;
  }
}

.back-button {
  width: 64px;
  height: 64px;
  --background: var(--ion-color-medium);
  --color: var(--ion-color-secondary);
  position: fixed;
  bottom: 25px;
}

.next-button {
  width: 156px;
  height: 64px;
  color: var(--ion-color-light);
  position: fixed;
  bottom: 25px;
  right: 7.1%;
}

1 post - 1 participant

Read full topic

Anyone has an example how to use SIP with Ionic V5?

1 post - 1 participant

Read full topic

Apple Pay integration with IONIC 3. Error completeTransactionWithMerchant function of undefined
I am trying to use the plugin to integrate Apple Pay in my IONIC v3 app from https://ionicframework.com/docs/native/apple-pay/.

It is really saddening to say that this was already asked more than a couple of times [ref below] but hasn’t been addressed yet. I request the “Elite” IONIC team to look at such matters on priority. Spending so long for such petty things makes me give a second thought on the performance and team of IONIC.

Ref:

1. Ionic 2 apple pay error
2. https://stackoverflow.com/questions/61516440/apply-pay-ionic-v4
3. Apple pay not working in iPhone 6s Simulator for ionic 4

1 post - 1 participant

Read full topic

has anyone try to integrate ihealth products with ionic cordova?

1 post - 1 participant

Read full topic

Hi,

I have an app that has a PHP backend and retrieves data from APIS. Before the app is getting the data via HTTP Rest APIs and now the server has enabled SSL certificate. So I had to change my URLs to https.

but now I’m getting the following error.

image723×169 17.4 KB

1 post - 1 participant

Read full topic

Hello,

I am about to change my API DNS in the coming days and I am a little bit concerned by the DNS propagation. During that time, my app, that relies on API calls, won’t be working at all since the web server will be shut down. I’m OK with that.
With Ionic/Cordova, is there anything special I should be aware of ? Beside a low TTL, are there any other best practices ?

Thx

1 post - 1 participant

Read full topic

With system dark mode enabled for iOS ion-cards become basically invisible. Is something set up wrong in my project or is this correct? On Android the card has a slightly lighter background and it looks a lot better.

Any suggestions on this would be great.

Screenshot 2020-07-06 at 12.02.181538×1568 230 KB

1 post - 1 participant

Read full topic

Hello people,
I am building a PWA with ionic 5 Angular and I performed the tests using http, because I find it simpler since I don’t have a valid ssl certificate.

Recently I went to perform the tests in https and the problem is that some components are not being loaded sometimes they do not load the ionic components (toast, modal, action sheet) other times they do not even load the icons of the action sheet. My routes in the app-rpiutings are being loaded with lazy-loading.

Sorry for my English.

GET https://localhost:8100/stencil-ion-segment_2-md-entry-js.js net::ERR_CERT_AUTHORITY_INVALID

index-2cd7e630.js:1961 ChunkLoadError: Loading chunk stencil-ion-segment_2-md-entry-js failed.
(error: https://localhost:8100/stencil-ion-segment_2-md-entry-js.js)
    at requireEnsure (https://localhost:8100/runtime.js:127:26)
    at Array.map (<anonymous>)
    at webpackAsyncContext (https://localhost:8100/main.js:486:34)
    at loadModule (https://localhost:8100/vendor.js:108869:166)
    at initializeComponent (https://localhost:8100/vendor.js:108524:20)
    at https://localhost:8100/vendor.js:108666:32
    at ZoneDelegate.invoke (https://localhost:8100/polyfills.js:3709:26)
    at Zone.run (https://localhost:8100/polyfills.js:3474:43)
    at https://localhost:8100/polyfills.js:4205:36
    at ZoneDelegate.invokeTask (https://localhost:8100/polyfills.js:3741:31)

Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined
    at initializeComponent (index-2cd7e630.js:1633) TypeError: Cannot read property 'isProxied' of undefined
    at initializeComponent (https://localhost:8100/vendor.js:108531:24)

GET https://localhost:8100/stencil-ion-action-sheet-md-entry-js.js net::ERR_CERT_AUTHORITY_INVALID

ChunkLoadError: Loading chunk stencil-ion-action-sheet-md-entry-js failed.
(error: https://localhost:8100/stencil-ion-action-sheet-md-entry-js.js)
    at requireEnsure (https://localhost:8100/runtime.js:127:26)
    at Array.map (<anonymous>)
    at webpackAsyncContext (https://localhost:8100/main.js:486:34)
    at loadModule (https://localhost:8100/vendor.js:108869:166)
    at initializeComponent (https://localhost:8100/vendor.js:108524:20)
    at https://localhost:8100/vendor.js:108666:32
    at ZoneDelegate.invoke (https://localhost:8100/polyfills.js:3709:26)
    at Zone.run (https://localhost:8100/polyfills.js:3474:43)
    at https://localhost:8100/polyfills.js:4205:36
    at ZoneDelegate.invokeTask (https://localhost:8100/polyfills.js:3741:31)

GET https://localhost:8100/svg/pencil.svg net::ERR_CERT_AUTHORITY_INVALID
Unhandled Promise rejection: Failed to fetch ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Failed to fetch TypeError: Failed to fetch

1 post - 1 participant

Read full topic

ion camera provides directive and service that manages everything for you out of box.

Npm link : https://www.npmjs.com/package/@indraraj26/ion-camera

Upcoming feat: upload through http return progress and response

WhatsApp Image 2020-07-05 at 8.51.52 PM881×593 83.3 KB

WhatsApp Image 2020-07-05 at 8.52.12 PM933×634 96.5 KB

1 post - 1 participant

Read full topic

What I want to achieve is when I click on ion-select to open an ion-datetime.

What I achieved so far is opening from an ion-item, but it’s quite hard to customise to make it look as an ion-select.

I saw some posts in here using DatePicker from ionic-angular, but this doesn’t work anymore for ionic 5. If you have any suggestions that would be amazing. Thanks!

my HTML

<ion-item class="dateItem"(click)="openDatePicker()">Date of birth </ion-item>
              <ion-datetime
                formControlName="combinedSelects"
                value="dob"
                #dateTime
                style="display: none;">
              </ion-datetime>

My TS

import { Component, OnInit, ViewChild } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: "app-combined-selects",
  templateUrl: "./combined-selects.component.html",
  styleUrls: ["./combined-selects.component.scss"],
})
export class CombinedSelectsComponent implements OnInit {
  date: String;
  @ViewChild("dateTime") showDate;

  constructor() {}

  ngOnInit() {}

  openDatePicker() {
    this.showDate.open();
  }
}

1 post - 1 participant

Read full topic

I’m migrating a cordova project fully over to Capacitor at the moment. Are they options with toast for buttons, and specifying how long the toast stays other than short or long, I can’t seem to find much outside of the official page.

1 post - 1 participant

Read full topic

Question using the ionic youtube plugin how can i change my view from full screen when it opens the youtube app to vertical not full screen. I just want it to open so people can also comment or click like. It always open to full screen.

1 post - 1 participant

Read full topic

I am using ion-select with ion-select-option in ionic v5. My problem is that when the text is selected it is displayed within a div of class select-text that is part of a shadow dom. The text has the css white-space:nowrap so I cannot see all of the text. See example image.

Screenshot from 2020-07-06 14-43-03908×300 31 KB

I would like to have multi-line text and control it myself, similar to:

Screenshot from 2020-07-06 14-44-13760×308 32.9 KB

This has been done within a web emulator using chromium.

I have found the code that generates the select-text (ion-select_3-md.entry.js) and the white-space css is not built from a variable and it is not inherited. Here is an extract: .select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}. So short of changing the md and ios code how can I achieve having wrapped selected text?

Any help would be much appreciated.

1 post - 1 participant

Read full topic

Hi. I’m using ion-datetime in Ionic 5. My client has asked me to make it less sensitive as it’s hard to pick the date and time (I agree). Is there any way to make it a bit easier to “land” on the date, please? Maybe a snap setting or something? Thanks.

1 post - 1 participant

Read full topic

salut,je travail sur une application android avec ionic, et lorsque je lance la commende Ionic Cordova Build Android j’ai toujour cette erreur qui persiste.

merci d’avance.

Annotation 2020-07-06 122957927×229 13.1 KB

1 post - 1 participant

Read full topic

I have noticed in a few of my projects, that as I am compiling the code through my CLI, that in some projects the output text remains all black, while others output text in black, yellow and green?

I also noticed that the top project is being ran through webpack, while the bottom is not. Is that something that is configurable?

Screen-Shot-2020-07-03-at-10_43.57-AM.png.6ebb5d3c5827a774f6788a81f606c3dc1187×939 351 KB

Screen-Shot-2020-07-03-at-10_42.18-AM.thumb.png.be93d06505e197b588fb30bc87f975721000×649 277 KB

1 post - 1 participant

Read full topic

I have updated my Ionic 4 project (angular based) to Ionic 5 using:

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

I noticed that it is using 8.2.14.

Does Ionic 5 currently work with Angular 10?

If not Angular 9?

Thanks,

Brent

1 post - 1 participant

Read full topic

Hi, recently I upgraded my Ionic application from 3 to 5 and I have been able to resolve all of the errors that have broken in the process. After fixing all the issues I am stuck on a white page even though in my logs it shows that the page is routing to the correct login page. These are the logs generated by the routing module:

Ionic Native: deviceready event fired after 0 ms
vendor.js:79085 Router Event: NavigationStart
vendor.js:79080 NavigationStart(id: 1, url: '/login')
vendor.js:79080 
vendor.js:66254 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:79085 Router Event: RoutesRecognized
vendor.js:79080 RoutesRecognized(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: GuardsCheckStart
vendor.js:79080 GuardsCheckStart(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: ChildActivationStart
vendor.js:79080 ChildActivationStart(path: '')
vendor.js:79080 
vendor.js:79085 Router Event: ActivationStart
vendor.js:79080 ActivationStart(path: 'login')
vendor.js:79080 
vendor.js:79085 Router Event: GuardsCheckEnd
vendor.js:79080 GuardsCheckEnd(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } , shouldActivate: true)
vendor.js:79080 
vendor.js:79085 Router Event: ResolveStart
vendor.js:79080 ResolveStart(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: ResolveEnd
vendor.js:79080 ResolveEnd(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080 
vendor.js:79085 Router Event: ActivationEnd
vendor.js:79080 ActivationEnd(path: 'login')
vendor.js:79080 
vendor.js:79085 Router Event: ChildActivationEnd
vendor.js:79080 ChildActivationEnd(path: '')
vendor.js:79080 
vendor.js:79085 Router Event: NavigationEnd
vendor.js:79080 NavigationEnd(id: 1, url: '/login', urlAfterRedirects: '/login')
vendor.js:79080 
vendor.js:79085 Router Event: Scroll
vendor.js:79080 Scroll(anchor: 'null', position: 'null')
vendor.js:79080 

This is the app-routing.module:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginPage
  },
  {
    path: 'auth',
    component: AuthPage
  },
  {
    path: 'care-team',
    component: CareTeamPage
  },
  {
    path: 'communities',
    component: CommunitiesPage
  },
  {
    path: 'dashboard',
    component: DashboardPage
  },
  {
    path: 'faq',
    component: FaqPage
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordPage
  },
  {
    path: 'forgot-username',
    component: ForgotUsernamePage
  },
  {
    path: 'friends',
    component: FriendsPage
  },
  {
    path: 'hcs',
    component: HcsPage
  },
  {
    path: 'history',
    component: HistoryPage
  },
  {
    path: 'medicine-detail',
    component: MedicineDetailPage
  },
  {
    path: 'medicines',
    component: MedicinesPage
  },
  {
    path: 'notifications',
    component: NotificationsPage
  },
  {
    path: 'privacy',
    component: PrivacyPage
  },
  {
    path: 'profile',
    component: ProfilePage
  },
  {
    path: 'settings',
    component: SettingsPage
  },
  {
    path: 'signup',
    component: SignupPage
  },
  {
    path: 'terms',
    component: TermsPage
  },
  {
    path: 'wearables',
    component: WearablesPage
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: true, useHash: true }),
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }, ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the app.module:

@NgModule({
    declarations: [MyAppPage,
        AuthPage,
        CareTeamPage,
        CommunitiesPage,
        DashboardPage,
        FaqPage,
        ForgotPasswordPage,
        ForgotUsernamePage,
        FriendsPage,
        HcsPage,
        HistoryPage,
        LoginPage,
        MedicineDetailPage,
        MedicinesPage,
        NotificationsPage,
        PrivacyPage,
        ProfilePage,
        SettingsPage,
        SignupPage,
        TermsPage,
        WearablesPage
    ],
    entryComponents: [MyAppPage],
    imports: [BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        IonicSignaturePadModule,
        NgbModalModule,
        IonicModule.forRoot(),
        NgbModule],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        ApiService,
        Device,
        Camera,
        InAppBrowser,
        FingerprintAIO,
        LocalNotifications,
        Contacts,
        BackgroundMode,
        Keyboard,
        Firebase,
        Badge,
        HttpClient,
        IonicsignaturepadProvider,
    ],
    bootstrap: [MyAppPage],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule {}

1 post - 1 participant

Read full topic

Hello everyone! I’ve been working on some Nx plugins that allow you to develop Ionic React and Capacitor apps in an Nx workspace. I believe that monorepos and cross-platform applications are a powerful combination, and I hope that these plugins can enable developers to do amazing things.

Here’s a blog post introducing these plugins: https://dev.to/devinshoemaker/build-cross-platform-applications-in-a-monorepo-with-nx-ionic-and-capacitor-6f8
And here is the official documentation site: https://nxtend.dev

1 post - 1 participant

Read full topic

Hi there! I have the following code to set the backgroung in one single page.

If I use the gradient part alone, that works.
If I use the background image alone, that works as well.

When I combine both it does not work. Just a white background.

ion-content.home-content{
–background: linear-gradient(#1f7b98, #A7B2B6, #ABAFAE, #AA9d95) url(…/…/assets/images/background-transparent.png) 0 0/100% 100% no-repeat / cover;
}

Any idea what could be wrong?

1 post - 1 participant

Read full topic