I'm lost with an issue on IOS.
I'm implementing a chat, where you have a list of contacts and, when you click on one of it, it will display the list of the associated messages.
It works perfectly on android and on browser (even on IOS browser), but on IOS, when I click on a contact to display the messages, nothing happened.
My function is not called from the html, even when i tried to ad some testing buttons everywhere on my ion-content. It only works on my ion-header.
Could you please save my life ?
Here's my code :
HTML :
<ion-header>
<ion-toolbar>
<ion-buttons>
<button ion-button (click)="displayChat(undefined)">
Test (works here)
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="no-scroll" style="height: 100% !important;">
<div>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
<ion-list class="contactList">
<ion-item *ngFor="let chat of chats"
(click)="displayChat(chat)">
{{chat.contactName}}
<br>
<span class="chatDate">
{{chat.lastMessageSend}}
</span>
</ion-item>
</ion-list>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
</ion-toolbar>
</ion-footer>
TS :
displayChat(chat: Chat) {
console.log("Ok");
}
I reduced my code to be more readable.
Enjoy !
EDIT
.no-scroll .scroll-content {
overflow: hidden;
}
.chatDate {
float: right;
font-size: 0.7em;
}
It's not working in the footer either.
Ok, I figured out what the problem was.
Actually, this code was running into a Ionic Modal from a Popover.
I had to keep my Popover opened to handle some treatment with the OnDidDismiss method, but it could execute this method only if the popover is staying opened.
But, in IOS (of course), you cannot click on a modal if a Popover (or probably any another absolute element) is behind your modal.
So, to solve this issue, I created an Observable to handle the OnDidDismiss method (of the Modal), which I give as a parameter of the viewCtrl.dismiss method to get it back on the OnDidDismiss of the Popover view, and then subscribe the Observable.
Inside your button component, try adding ion-item instead of ion-button. I have a bit similar code where it is working fine.
Eg:
<button ion-item (click)="onClick()">Click me</button>
Let me know what happens after this! Will be ready to help.
Related
I have an component like so:
<ion-toolbar style="height: 100%">
<ion-buttons slot="start">
<ion-button> Logo</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
About
</ion-button>
<ion-button>
Connect
</ion-button>
<ion-button>
Watch
</ion-button>
<ion-button>
Events
</ion-button>
<ion-button>
Give
</ion-button>
</ion-buttons>
</ion-toolbar>
And I call it within another page like so:
<ion-header style="height: 8%">
<app-header style="height: 100%">
</app-header>
</ion-header>
However, when I run it and view the html it comes like this:
As you can see, the <ion-toolbar> is not matching the height of the <ion-header>. Technically it is, but <ion-toolbar> has a shadow root component nested within it called: div.toolbar-container. That shadow root component is the one not setting the height to match the <ion-toolbar> even though the <ion-toolbar> component is working properly and matching the height of the <ion-header>.
Here is the correct example when I edit the styling of that shadow root component to height: 100% using HTML inspect:
So how can I change the height of that div class when it's parent is showing correctly but that div class isn't?
I've tried doing that Ionic Shadow parts document but that only relates to creating shadow root parts on your own.
The shadow root components that I'm trying to style seem to come standard with the and so that's what I'm trying to style.
I find it strange that the in the HTML inspect displays 100%, but it's shadow root component won't match it?
What a question. Obviously you would put this in your component.scss:
ion-toolbar {
--min-height: 8vh;
}
Everyone knows that.
I work on a Ionic v3 app and I'm trying to display HTML in a *ngFor.
I've my TestPage.html with :
<ion-list *ngFor="let c of cities">
<ion-item>
<div [innerHTML]="c.html_rate"></div>
</ion-item>
</ion-list>
In c.html_rate I've some <ion-icon name="star-half"></ion-icon>.
But on the screen nothing appear...
I've also try: <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(c.html_rate)"></div>
But that does not work...
As shown in another question ion-item can only render particular elements. You are attempting to render an ion-icon within the ion-item component which doesn't work.
You can test this is true simply by replacing what is being injected into your div. If you swap <ion-icon name="star-half"></ion-icon> for <ion-note>Testing</ion-note>
I added a SIDEMENU in my project as second page, and the first page is a screen only one image with a button for the second. But when I click the button, instead of showing the sidemenu button in the upper left corner, it is showing only the "back" arrow, but if I put my SIDEMENU page as the rootpage, it works perfectly. I just want to go to the second page and my sidemenu appear perfect and not like the "back" button. Please, if anyone understands me, help me: D
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> Vida carioca </ion-title>
</ion-navbar>
</ion-header>
it's this wrong
as i want
I am adding an ion-icon button to the ion-navbar in an Ionic 2 app.
It works correctly, but this solution seems rather verbose.
I would like to confirm that this is the correct/simplest-form/best-practice approach:
<ion-navbar>
<ion-title>Books</ion-title>
<ion-buttons end>
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
I would like to confirm that this is the
correct/simplest-form/best-practice approach.
It's perfect :)
It may seems like a little verbose, but each part of the code has its purpose. The <ion-buttons end>...</ion-buttons> will act as a container, to place the button in the right place.
In this case you're using end, and as you can see in this answer:
start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first
button on the right for android.
<ion-buttons end> would be on the right for ios and the last button on
the right for android.
left/right are provide as a way to over ride that.
Then inside of that container, you just need to place the button, in this case, with an icon inside:
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
I've added a side menu in my ionic 2 application that I'm developing, modifying the "super" template given by ionic. I've added the following code in app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I swipe on the left the menu appears correctly, but the problem is that, in the header of pages, I can't see the three bars to open the menu:
From the documentation, it seems that simply adding this code to the html makes the three bars appear, but it isn't working for me. Do I have to change something in the header of all the pages? I don't know, maybe the super template itself overrides something in the header of pages, so that the bars are not showed?
You could try adding button and icon.
Like this:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>