So i know how to make a maxLegnth for input but how would i do that for a label or card content? so say someone puts a quote with like 50 letters how could i limit that on card content to like 10 letters
1 post - 1 participant
↧
How to make label a certain amount of letters?
↧
Hybrid design implementation. Merge or make from scratch?
I have been fighting a lot with the styling implementations of Ionic. When I use components like ion-button to display a button, it is easy to style it to fit at custom design by using various variables like --color and --background-hover. The problem is when I try to wrap it in other components. When putting it inside a toolbar and ion-buttons, Ionic adds a lot of other classes like .sc-ion-buttons-md-s ion-button:not(.button-round) that override the variables I have set on the ion-button-element in my styles.
But at the toolbars in question, I want the buttons to look just like other buttons. The only way I have found to override this, is to add the variables directly on the native-part, som either ion-button::part(native) { *** } or repeating the style rules on ion-buttons ion-button::part(native). But some styles override this as well. Like some times the button color is overridden by a style set on the .button-native setting color: inherit.
The above details was just one example. I experience quite a bit of these kinds of issues. It seems it is a bit hard to combine custom styles with the default ones. It might be reasons why styles are overridden in certain constexts (like buttons inside a toolbar) but it makes it hard to customize the design to the needs for the application.
I have actually considered dropping ion-components and building all components from scratch. This is for the beginning of an app that will grow a lot over time, so the architectural choices here matters a lot, and getting things up and running quickly (which ionic seems fantastic at) is a bit less important than practical maintainability and development speed over the time of the application lifespan.
So, anyone else here who has considered similar issues? What have you decided to do in cases like this? Thank you!
1 post - 1 participant
↧
↧
Ion-toolbar height issue on iOS
I am having an issue that ion-toolbar is too tall on iOS. Here is a screenshot of how the toolbar displays on iOS (on the left), versus in a browser (on the right). (I have added a border around the ion-toolbar to make it clear. My sense is that an additional height equal to the ion-safe-area-top is being added to the header (because on devices that have large top areas, this gap becomes even bigger). Has anyone else encountered this problem? Suggestions?
4 posts - 2 participants
↧
SortableJS Tree List - Re-homing Nested Items
I would like to move item “music” and make it a child of the second “workspace”.
Observe, music can be moved to a new sibling location.
However, I must “open” the workspace item, in order to make music its child.
If a node is a leaf, same problem: I have to click the leaf first, in order to “expose its dragArea”.
Anyone know how to fix this? (A repo is available if that will help.)
1 post - 1 participant
↧
Minimize app with hardware back button
In the app I’m developing there is no forwards-backwards navigation. The app basically consists of two tabs. With the current (default) behavior, pressing the hardware back button on my phone triggers the backward navigation, that is switching between the two tabs.
I know I can modify the handler for the back button, but is there a way using Capacitor or the official plugins to trigger a “show homescreen” / “minimize app” button press / gesture ?
1 post - 1 participant
↧
↧
How to dismiss an (declared without the controller)
How to dismiss a modal declared with the <ion-modal> component :
<ion-modal
ref="myModal"
:is-open="isOpenRef"
css-class="my-custom-class"
@didDismiss="setOpen(false)"
>
<Modal :data="data"></Modal>
</ion-modal>
I have tried to call this.$refs.myModal.$el.dismiss() without success.
1 post - 1 participant
↧
Function doesn't wait for subscribe to get the information
I am getting the data from firebase saving it in an observable then subscribing to it to extract the data.
In my service i subscribe to an observable to get the data using this method
canAddBookmark(item : bookmark){
let canAdd = true;
this.bookmarks.subscribe((data)=>{
alert("First!!!");
for(let i =0;i<data.length;i++){
if(item.idd==data[i].idd&&item.email==data[i].email){
canAdd=false;
return canAdd;
}
}
canAdd = true;
}
);
return canAdd;
}
Which should return a boolean to a function in another class the function:
addBookmark(idd:number){
let temp:bookmark = {idd:idd,email:this.email};
let val = this.bookmarkDb.canAddBookmark(temp);
alert("Second!!!!");
if(val==true){
alert("success");
this.bookmarkDb.addBookmark(temp);
}
if(val==false){
alert("Already book marked");}
}
the alert with “second” comes before “first”. is there anyway to make the function wait for the other function to return the boolean.
or any better way to get the information from the observable because i am having a lot of issues from it
another example of the issue
in the service:
getItemByIdd(id : number) : items {
this.items.subscribe( (data)=>{
for(let i =0;i<data.length;i++ ){
if(data[i].idd==id){
this.tempItesm=data[i];
alert(this.tempItesm.name);/////// the alert shows the right name (1)
return this.tempItesm; }
} } );
return this.tempItesm;
}
The class i want to use the function in:
inc(id:string,idd:number){
this.titem= this.dBItems.getItemByIdd(idd);
/// i want the code here to wait for the function to execute
alert(this.titem.name); //// the alert shows undefined (2)
}
alert (2) comes before (1) is there any possible way to force the code to wait? i tried to do async/await but failed.
1 post - 1 participant
↧
Help needed for popover component
Hi!
I’ve recently started using ionic and I’m currently trying to implement a popover via the popover component, but as I try to import the PopoverComponent as seen on the Ionic popover tutorial and on some tutorials the import simply doesn’t work
I’m trying to import it using:
import { PopoverComponent } from ‘…/…/component/popover/popover.component’;
but I get the following error:
Cannot find module ‘…/…/component/popover/popover.component’ or its corresponding type declarations.
Since I’ve seen this import several times I assumed it was a default ionic component but that doesn’t seem to be the case as I don’t have any folder for this Popovercomponent.
I really feels like I’m missing something huge here… Either you need to completely create the popover component by yourself or there’s some command to install some ionic components that aren’t available by default, any help would be appreciate, I’d like to know why the Popovercomponent isn’t available…
I’m using the latest version of Ionic available
1 post - 1 participant
↧
How can I create Dynamic rows using input number
I want to create like if I enter ‘5’ in then 5 dynamic rows should be created below which is shown below .How Can I build? Thanks in advance
1 post - 1 participant
↧
↧
Need to click ion-button two times to trigger the click event
I have to click two times to trigger the click event of an ion-button code chunk below
open the keyboard by focusing on ion-textarea and press save when keyboard. is up
<div class="msgContainer">
<div class="defaultFont ion-padding-bottom"><b> Instructions:</b></div>
<div class="inputContainer">
<div class="login-input">
<ion-textarea (ionBlur)="checkBlur(true)" (ionFocus)="checkFocous(false)" [(ngModel)]="item"></ion-textarea>
</div>
<ion-button tappable color="primary" (click)='saveMessage(item)'>Save</ion-button>
</div>
<ion-list class="listClass" *ngIf="!isBlur">
<ion-item>dummy test1</ion-item>
<ion-item>dummy test2</ion-item>
<ion-item>dummy test3</ion-item>
</ion-list>
</div>
My code is inside an ion modal but i don’t think that’s a problem?
1 post - 1 participant
↧
How to handle large amount of user data input?
I am trying to do a page which requires a lot of user input (mostly text and numbers). Ideally I want to have a grid of 5 or 6 columns, and with a default of 3 rows (which can be increased or decreased by the user since can’t know how many rows are needed in advance).
The problem is on mobile, each column would have a limited width; so it doesn’t look very nice especially when users can enter many texts on a few columns. I tried with ion-textarea but it would increase the row height sometimes.
Another way I can think of to handle this is use a form, where allowing users to enter information about one item a time, so that one item can have the entire screen and each user entry can be stacked, making use of the mobile device height scrollable. Of course, users shall options to enter another item once finishing an item or submit the form.
I wonder which design is more idiomatic? Or is there any other way to handle this kind of situation?
1 post - 1 participant
↧
How to integrate Geofencing service into my ionic cordova app?
Hi, I want to integrate the Geofence service into my app. Can anybody please help me out how to integrate the code of this link → IonicFramework Geofence ← into my app ?
My project is on angular framework.
- What are the plugins that needs to be installed ?
- What is the purpose of unique id inside the code? How do I get that unique id for sending custom notifications to multiple users.
1 post - 1 participant
↧
How to upload any file in mysql database with php
how to upload any file into MySQL using PHP. I am using ionic (angular )?. Looking for simple solution with a PHP backend. Thanks in Advance. Please share references here.
1 post - 1 participant
↧
↧
Can Ionic develop both mobile and web with one codebase?
Sorry if this sounds silly but can I ask whether ionic can develop both mobile and web with one codebase? I mean I started reading ionic official tutorials and created a new project using the tab template. Then start the project locally in a browser, it seems the UI layout in the browser is still in the mobile format, looking odd on the web. So this got me asking whether ionic is only for developing cross platform mobile apps with one codebase; the same codebase can’t really be deployed as a standard web app (not PWA)?
10 posts - 2 participants
↧
Use the mobile as an NFC smart card
Hello, i want to write an application that can store a unique ID (~ a card id) and then share it as NFC tag : use the mobile as an NFC smart card.
I find on the documentation of the NFC plugin how to read / write, but that’s not what I want to do. And it looks even more complicated on IOS.
I don’t find much choice in ionics on this issue. For me it’s Host-based Card Emulation. Does anyone have a lead, or a way to achieve using this technology from an Ionic application?
1 post - 1 participant
↧
Ionic + PWA - show splashscreen in browser
I’m having trouble loading splashscreen for a PWA solution with Ionic.
I found some cases and theoretically some solutions, but they didn’t work for my solution.
Someone can indicate a possible solution or even another way to load the image before finalizing the application load.
Configuration on config.xml
<platform name="browser">
<preference name="SplashScreen" value="src/assets/img/logo-dark.png" />
</platform>
1 post - 1 participant
↧
Enforcing the same webview for all android APIs
Hello guys,
It’s been 2 days of me trying to figure out if there’s a way to enforce the same webview for all android APIs out there, or at least for the ones > 20.
I tried crosswalk but that didn’t work well and is no longer maintained, which already raises a flag.
Environment:
$ ionic cordova plugin list
cordova plugin ls
cordova-plugin-device 2.0.3 “Device”
cordova-plugin-ionic-keyboard 2.2.0 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.2.1 “cordova-plugin-ionic-webview”
cordova-plugin-nativeaudio 3.0.9 “Cordova Native Audio”
cordova-plugin-splashscreen 5.0.4 “Splashscreen”
cordova-plugin-statusbar 2.4.3 “StatusBar”
cordova-plugin-whitelist 1.3.4 “Whitelist”
$ ionic info
Ionic:
Ionic CLI : 6.11.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.7
@angular-devkit/build-angular : 0.1102.13
@angular-devkit/schematics : 11.2.13
@angular/cli : 11.2.13
@ionic/angular-toolkit : 3.1.1
Capacitor:
Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.3.0) : 1.0.0
System:
NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.12.0
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C505
The main issue I’m trying to resolve is this:
On a browser and on a real device (android 11), the app looks the same.
However, on android 7 (pie) and android 8 (oreo), the app’s CSS and HTML5 canvas look all messed up.
I thought that using negative margins and %s was supported for nearly all modern browsers but that’s not entirely true, it seems.
This brings me to the main question… Is there a way to enforce the same webView (or the same Chrome version) across all APIs, so the whole IONIC idea makes sense?
Thank you!
P.S - the ultimate solution would be to limit my app for just new devices but that’d be irrational.
1 post - 1 participant
↧
↧
Ionic swipe sidemenu error
↧
When does ngOnInit run? Serious question
-
ngOnInit runs once during component initialization and then the page is stored on the stack. So only ionViewWillEnter and ionViewDidEnter fire after that when navigating back to the page.
-
If I close the app on my iOS or Android device and then open it again ngOnInit runs. So obviously the stack is cleared when the app is closed.
-
If I leave the app for a few days and come back?
Sometimes it seems that ngOnInit runs although I can’t be 100% sure. Is there a time limit and then the page expires or something or the app is closed by the OS after a period of not being used?
I reload some data on the ngOnInit and I would like to know in which situations this reloads.
1 post - 1 participant
↧
Routing Issue [Ionic 5]
Hi everyone - I’ve been away from Ionic for a year and the routing in Ionic 5 (or better yet, Angular) is messing with me. I want to pass an ID to a page when it’s called however when I do so I get this error:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit-printer/-Ma1zLBxs3EHhnsLtzLw'
Error: Cannot match any routes. URL Segment: 'edit-printer/-Ma1zLBxs3EHhnsLtzLw'
As context, edit-printer is the page and ~Ma1… is the firebase ID I am passing to the edit-printer page. I am linking to the edit-printer page via the HTML of my home page as follows:
<button ion-button clear [routerLink]="['/edit-printer/', printer.$key]">
And finally in edit-printer.page.ts:
export class EditPrinterPage implements OnInit {
updatePrinterForm: FormGroup;
id: any;
constructor(
private prtService: PrinterService,
private actRoute: ActivatedRoute,
private router: Router,
public fb: FormBuilder
) {
this.id = this.actRoute.snapshot.paramMap.get('id');
this.prtService.getPrinter(this.id).valueChanges().subscribe(res => {
this.updatePrinterForm.setValue(res);
});
}
I am sure I am doing something stupid but why won’t this work?
1 post - 1 participant
↧