Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70612 articles
Browse latest View live
↧

Ion-card looks bad in dark mode

March 10, 2022, 6:01 pm
$
0
0

When I use an ion-card component, and I put another component type inside of it, such as a ion-item or ion-list, the rendering in dark mode looks really bad. The card has this gray background color, but then the other components are rendered with a black background. I can’t find any properties to ensure the background properties match. I can start messing with the css properties myself, but I don’t feel like I should need to with this barebone of an example. Here is an example directly from this page: ion-card: Card UI Components for Ionic Framework API

is there something I should be adding do have this rendered nicely in dark mode?

my html:

<ion-card>
  <ion-item>
    <ion-icon name="pin" slot="start"></ion-icon>
    <ion-label>ion-item in a card, icon left, button right</ion-label>
    <ion-button fill="outline" slot="end">View</ion-button>
  </ion-item>

  <ion-card-content>
    This is content, without any paragraph or header tags,
    within an ion-card-content element.
  </ion-card-content>
</ion-card>

<ion-card>
  <ion-item href="#" class="ion-activated">
    <ion-icon name="wifi" slot="start"></ion-icon>
    <ion-label>Card Link Item 1 activated</ion-label>
  </ion-item>

  <ion-item href="#">
    <ion-icon name="wine" slot="start"></ion-icon>
    <ion-label>Card Link Item 2</ion-label>
  </ion-item>

  <ion-item class="ion-activated">
    <ion-icon name="warning" slot="start"></ion-icon>
    <ion-label>Card Button Item 1 activated</ion-label>
  </ion-item>

  <ion-item>
    <ion-icon name="walk" slot="start"></ion-icon>
    <ion-label>Card Button Item 2</ion-label>
  </ion-item>
</ion-card>

the result:

image

3 posts - 2 participants

Read full topic

↧
Search

Ion-tabs with login page 🤯

March 10, 2022, 11:19 pm
$
0
0

Really sorry if this has already been answered somewhere else, none of the other posts I found seemed to solve the problem I’m having… I’m trying to put tabs on a page called ‘dashboard’, where the user authenticates through the ‘home’ page first before they can access it.

The top level routing module look like this:

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
    },
    {
        path: 'dashboard',
        loadChildren: () => import('./dashboard/dashboard.module').then( m => m.DashboardPageModule)
    }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

…and the dashboard routing module looks like this:

const routes: Routes = [
    {
        path: '',
        component: DashboardPage,
        children: [
            {
                path: 'launchpad',
                component: LaunchpadComponent
            },
            {
                path: 'jobs',
                component: JobsComponent
            },
            {
                path: 'invoices',
                component: InvoicesAndQuotesComponent
            },
            {
                path: '',
                redirectTo: '/dashboard/launchpad',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/dashboard/launchpad',
        pathMatch: 'full'
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DashboardPageRoutingModule {}

The launchpad page opens as expected, but if I click on one of the tab buttons (e.g. jobs), I get an error as the router tries to navigate to “/dashboard/launchpad/jobs” instead of “/dashboard/jobs”.

What am I doing wrong?

1 post - 1 participant

Read full topic

↧
↧

Internal Server Error when reload in Ionic Angular Universal

March 11, 2022, 8:10 am
$
0
0

The first time it loads without an issue but, when I try to reload routes with query params like this localhost:4000/u?u=6222d4fd021b3080bc4aa6d4 , it shows me this message.

4QdBw

This is the error message showed in Google console.

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'none'".

Although I have Content-Security-Policy in my index.html .

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https: sha256-ACotEtBlkqjCUAsddlA/3p2h7Q0iHuDXxk577uNsXwA=; font-src 'self' data: https:; connect-src 'self' wss: https:" />

This is the page source of the above page

ilsAK

1 post - 1 participant

Read full topic

↧

Ion Router - state lost

March 11, 2022, 10:48 am
$
0
0

Hi :slight_smile:

i´m using createContext, useReducer and build a state managment.
Now i use IonReactRouter IonRouterOutlet and Route.

When i click on a Rout the state is getting lost.

i guess a beginner question :expressionless:

thanks for help

1 post - 1 participant

Read full topic

↧

Is it possible to access capacitor storage data from iOS Widget?

March 11, 2022, 3:03 pm
$
0
0

I would like to create an iOS widget for my app. In my Ionic Capacitor app I am saving a list of locations using the capacitor Storage api. Would it be possible to access these locations from a widget? If so, how would I go about doing that? Thanks for any help!

1 post - 1 participant

Read full topic

↧
↧

Feature Requests

March 11, 2022, 5:12 pm
$
0
0

It would be great to see the following in the AppFlow UI

  • current/last build status next to each app

  • number of live updates next to each app

  • enable/disable automations

  • group apps manually - or use bundle id

  • name build ‘templates’ for one click in ui next to each app

would it be possible to create an appFlow dashboard for my organisation as well?

thanks!

1 post - 1 participant

Read full topic

↧

Ionic production build not the same as preview

March 11, 2022, 9:23 pm
$
0
0

I created my base UI for a shop grabber application for a shooter game and it looks good. I used the ion-card components. I used the ion columns and rows for the layout. The live preview shows the UI great but the production build barely looks like it. Preview

1 post - 1 participant

Read full topic

↧

Ionic 6 - Add image between the ion-button and the ion-title in the ion-toolbar

March 12, 2022, 4:00 am
$
0
0

Hello!

I’m trying to add an auto-adaptive image between the ion-button (menu button) and the ion title that I placed on the right within my ion-toolbar but I’m stuck with scss and the documentation I’ve found on the Internet.
Basically Ii would like to achieve this:
Snipaste_2022-03-12_12-55-07
This is the way I’ve structured my ion-toolbar:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-title class="ion-text-right">Contacts</ion-title>
  </ion-toolbar>
</ion-header>

And this is the css:

ion-toolbar {
  --background: none;
  background: url("../../../../assets/imgs/MyLogo.svg") no-repeat fixed
    center;
  background-size: contain;
}

Actually the image takes the whole toolbar space and it is not contained between the menu button and the title.

Can you help please?

1 post - 1 participant

Read full topic

↧
Search

Using Unity Ads Cordova Plugin in Capacitor

March 12, 2022, 8:35 am
$
0
0

Hello everyone,

I would like to use com-artemisoftnian-plugins-unityads3 Cordova plugin inside my Capacitor app. As you know that plugin is not one of Ionic Native plugins.

I added plugin name to capacitor.config.ts.

  cordova:{
    staticPlugins:[
      'com-artemisoftnian-plugins-unityads3'
    ]
  }

Plugin has function exports like UnityAdsInit, ShowVideoAd etc. However, if I use functions by importing it directly I get error Cannot find module “cordova/exec”.

import { UnityAdsInit, ShowVideoAd } from 'com-artemisoftnian-plugins-unityads3/www/UnityAds3';

UnityAdsInit('1234567890', true, true, (res) => {
     console.log(res);
});

I found a way like to use plugin inse window object. But if I use plugin or exported function as window.UnityAdsInit() I get ‘window.UnityAdsInit’ is undefined error.

Actually I am not sure how I should use a Cordova Plugin in Capacitor app. How should I import or use Cordova plugin in Capacitor.

"@capacitor/core": {
      "version": "3.4.0",
}
"@ionic/core": {
      "version": "6.0.7",
}

1 post - 1 participant

Read full topic

↧
↧

Set swiper-pagination-bullet width to fill out the space

March 12, 2022, 9:09 am
$
0
0

I’m trying to style swiper pagination bullet of swiperjs inside my ionic app to look like this:
t1SV3m.png
At the moment I got this result setting width to 30% since there are just three bullets. Without specifying the value the bullets look like this.
rsg6rm.png
But I need to get the result of the first picture event with a different number of bullets.
This is the css code I add inside the global.scss file.

.swiper-pagination-bullet-active {
  background: #863339;
  opacity: 0.4 !important;
}

.swiper-pagination-bullet {
  width: 30%; // I need to fix this to adapt with every possible number of bullets
  color: gray;
  opacity: 0.2;
  height: 5px;
  border-radius: 0px;
}

.swiper-pagination {
  top: 0px;
  height: min-content;
}

1 post - 1 participant

Read full topic

↧

Capacitor x Svelte Kit

March 12, 2022, 9:25 am
$
0
0

i try to run it for my project but then i failed to npx cap sync. it says that the web assets directory must contain index.html and when i add it into build folder, everytime i do npm run build the index.html file suddenly dissapear… I tried to make custom folder aka public, and add index.html file and customize the capcitor.json it can be run but it just run the plain html while i need to run index.svelte to run my app… any suggestion for the problem? thanks in advance

1 post - 1 participant

Read full topic

↧

Spacing or Padding between header and

March 12, 2022, 12:03 pm
$
0
0

Quick question here guys, I cant seem to figure this out. I have a nested router inside of a component. My main routes are contained in my App.tsx file as shown here.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/events">
            <Tab1 />
          </Route>
          <Route path="/preferences">
            <Preferences />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/events" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/events">
            <IonIcon icon={calendar} />
            <IonLabel>Events</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/preferences">
            <IonIcon icon={reader} />
            <IonLabel>Preferences</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={cog} />
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

Inside of this I have a Preferences.tsx component. In this component I have another nested router setup. Routing works fine, its just the content that’s loaded in my router when rendered, is overlapped by my IonHeader thats in my preferences.tsx component. Heres the code, and an image of what it looks like. Any suggestions?

Preferences.tsx

<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Preferences</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen className="ion-padding">
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Preferences</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRouterOutlet>
          <Route exact path='/preferences/preference-list'>
            <PreferenceList/>
          </Route>
          <Route path='/preferences/preference-slides'>
            <PreferenceSlides/>
          </Route>
          <Route exact path="/preferences">
            <Redirect to="/preferences/preference-list" />
          </Route>
        </IonRouterOutlet>
      </IonContent>
    </IonPage>

and here is an image of what the rendering looks like

error-img

1 post - 1 participant

Read full topic

↧

Testing using Playwright device emulation with push notifications

March 13, 2022, 4:15 am
$
0
0

Is anyone using Playwright to test their app that has support for push notifications?

I’ve got a react app that uses the Local Notifications and Push Notifications Capacitor v3 plugins.

Whenever I use Playwright’s device emulation mode, I get a fatal error: “Notifications not supported in this browser.”

Since this error crashes my app, I can’t use the device emulation to run tests (I can emulate desktops fine, but obviously for a mobile app testing with emulated mobile devices is better than desktops).

If anybody has this working, I’d love to hear how you did it.

1 post - 1 participant

Read full topic

↧
↧

Ionic 6 Infinite scroll bug with Vue Vite

March 13, 2022, 7:27 am
$
0
0

Hi !

Recently I tried to implement Ionic Infinite Scroll, which would fetch data from axios, but faced with an issue, it just doesn’t work out. Seems like an integrational issue with Ionic itself. Same code works fine with Vue Cli. Checked everything and noticed, that problem might be with positional property. Perhaps it just doesnt detects event when viewport hits the bottom of container, eventually data doesnt fetches

I’ve recreated problem here : Stackblitz

Package JSON :

“dependencies”: {

"@ionic/vue": "^6.0.11",

"@ionic/vue-router": "^6.0.11",

"@vue/compiler-sfc": "^3.2.31",

"axios": "^0.26.1",

"vue": "^3.2.25",

"vue-router": "^4.0.14"

},

“devDependencies”: {

"@vitejs/plugin-vue": "^2.2.0",

"vite": "^2.8.0"

}

Literally same code, but with Vue Cli: github

Thanks

1 post - 1 participant

Read full topic

↧

Code-push sdk.isAuthenticated is not a function

March 8, 2022, 9:44 pm
$
0
0

Hi,

I am trying to run the code-push release command code-push release-cordova MyApp-Android android -m on my ionic-v3 project. But after Releasing update contents to CodePush: I am getting the below error:

[Error] sdk.isAuthenticated(...).then(...).then(...).then(...).finally is not a function

image

I also tried installing the latest version of the code-push plugin but got the same error.

Project Details

Android target SDK Version: 30

ionic info:

cli packages: (C:\Users\CGauns\AppData\Roaming\nvm\v8.9.4\node_modules)

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

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

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

System:

    Node : v8.9.4
    npm  : 5.6.0
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\CGauns\AppData\Local\ANDROID\sdk;C:\Users\CGauns\AppData\Local\ANDROID\sdk\build-tools;C:\Users\CGauns\AppData\Local\ANDROID\sdk\tools;C:\Users\CGauns\AppData\Local\ANDROID\sdk\platform-tools;C:\Users\CGauns\AppData\Local\ANDROID\sdk\tools\bin;

Misc:

    backend : pro

1 post - 1 participant

Read full topic

↧
Search

Ion-datetime badge

March 13, 2022, 11:02 am
$
0
0

Hi community!

I’d like to implement a date-picker that highlights particular days, ideally with a number badge (let’s say on some days there are “x” events and I want to see it very quickly when choosing a date).

Today I’m using npm package “angular-calendar” which supports such badges out of the box, see for example Angular 12.0+ calendar

I’d like to use Ionic 6 ion-datetime instead, to have a simpler, more consistent setup and better mobile support (like slides).

My question is: would anybody know a simple solution to show some days in a different background color, and ideally even show a number badge on top of those dates?

Thanks!

1 post - 1 participant

Read full topic

↧

Error in multi ./node_moduls/@ionic/angular/core/css in ionic5?

March 13, 2022, 12:03 pm
$
0
0

Hi team,
I have converted angular to ionic properly but after ionic serve I got below :point_down: error,can anybody tell m how you fix it?

IMG20220313235154

Please let m know how to fix it?

1 post - 1 participant

Read full topic

↧
↧

How to push notification with firebase FCM to all users of my App with Ionic ?!

March 13, 2022, 12:16 pm
$
0
0

I need to notify all users with news , i did only notification method with token of user but notification shown only on the device of this user , i need to notify all users
any help please ?

1 post - 1 participant

Read full topic

↧

Azure B2C AD

March 13, 2022, 2:20 pm
$
0
0

Did any one managed to authenticate without using ionic enterprise key. I need something simple to authenticate external users in Azure AD? Any sample code I can refer to?

1 post - 1 participant

Read full topic

↧

Crazy error deploy iOS "bundle identifier"

March 13, 2022, 9:07 pm
$
0
0

Hi, was trying to archive my ionic4x app and it works as normal but when tried to publish receive this error:

No suitable application records were found. Verify your bundle identifier ‘org.cocoapods.IRLDocumentScanner’ is correct.

thanks good souls in advance

1 post - 1 participant

Read full topic

↧
Viewing all 70612 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>