Previously I had the following code for a Call button
<a button ion-button outline href="tel:123456789"><ion-icon name="ios-call"></ion-icon></a>
It has worked up until RC2, but the button now attempts to call again if I I select cancel.
If I use
</ion-icon>
or
<a ion-button href="tel:123456789"></a>
it will still will attempt to call again after the cancel button is selected.
I am unsure of using the CordovaCallNumberPlugin to use the bypassAppChooser as I try to use plugins sparingly.
This appears to be a bug in Ionic specific to an iOS device. Issue #11510 also issue #11252.
It looks like the ionic team is closing #11252.
Related
I tried to put it like this, like on the example
<ion-col col-md-6>
<ion-list>
<ion-item>
<ion-label floating>Type</ion-label>
<ion-select interface="popover" [(ngModel)]="userType">
<ion-option value="1">Type 1</ion-option>
<ion-option value="2">Type 2</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
but the output is not similar on the example on the ionic documentation.
here is the output
I want something like this
What you are seeing is actually a platform issue: Ionic styles elements according to the platform you are running on. See the docs on this here.
You can also easily reproduce your issue viewing the ion-select docs and changing between iOS and Android.
iOS output:
Android output:
So assuming your developing for the iOS platform you don't have to change anything in your app to get the look you want. Once you deploy your app on an iOS device everything will look as you expect.
While testing your app in browser (I'm assuming Chrome, other browser might have the same feature) you might want to use the dev tools (F12) and toggle the device mode. There you can choose to see the viewport of a iPhone or iPad and after refreshing the page (F5) you should see the correct controls.
I'm working with Ionic 3 on iOS 11. Ever since upgrading to iOS 11, my buttons don't work inside Modals. Specifically speaking, the (click) events don't trigger:
HTML:
<button ion-button (click)="logoutUser()">LOGOUT3</button>
JS:
logoutUser() {
console.log('Logout the user');
}
Does anyone have any idea what might be wrong here?
Make sure you add a z-index to the outer most box in which your button resides.
I have a searchbar in my toolbar as follows:
<ion-toolbar color="clarity">
<ion-searchbar
[(ngModel)]="searchText"
[showCancelButton]="false"
(ionInput)="onInput($event)"
(ionClear)="onClear($event)">
</ion-searchbar>
</ion-toolbar>
and a function in the corresponding TS file:
onClear(event){
this.searchText = "";
}
But the 'onClear' event never gets hit when the searchbars little 'x' is clicked.. why is that?
Change it to (ionCancel) You're probably using an outdated ionic guide
After #Ivario18 suggested I change the clear to (ionCancel), I added the (ionCancel) as well as the (ionClear):
<ion-toolbar color="clarity">
<ion-searchbar
[(ngModel)]="searchText"
[showCancelButton]="false"
(ionInput)="onInput($event)"
(ionClear)="onClear($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
</ion-toolbar>
Now the clear is working...
I found that I was able to use just the (ionCancel) if I include the [showCancelButton]="true". Without it, the cancel didn't work at all, and the (ionClear) seemed to be breaking my infinite-scroll directive.
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit
I am using SyncFusion dialog box as below in one of my project.
<%=Html.Syncfusion().Dialog("divUpdateStatus")
.Title("Update Status")
.AutoOpen(false).Modal(true).Width(550).Height(370)
.AutoFormat(Skins.Office2007Black)
.Resizable(false)
%>
It does work fine in all the browsers except Internet Exploere(any version).
When I click on the button to open this dialog, it does open but everything is inactive.
All the buttons and textboxes on the dialog are disabled.
Not even Cross button to cancel the dialog is enabled to close the dialog.
I have to press 'ESC' to comeout of this, then again I click on button to open that, it works fine.
On the added reference of the Syncfusion dll, it shows Version: 10.204.0.56
Anyone has idea on this?
Thank you,
I have used Syncfusion Dialog in my application, but it is working fine in Internet Explorer for me. My application referred jquery-1.4.2 script and jquery-ui-1.8.22 script within it. Dialog is working fine with this.
I have used Syncfusion version 10.2.0.56 and use the below code to render Dialog,
<code>
<div id="divUpdateStatus" style="visibility: hidden;">
<%=Html.Label("lbl", "UserName") %>
<%=Html.TextBox("text")%><br /><br />
<%=Html.Label("lbl2", "Password")%>
<%=Html.TextBox("text")%><br /><br />
<%=Html.Syncfusion().Button("btn").Text("Submit")%>
</div>
<%=Html.Syncfusion().Dialog("divUpdateStatus").Title("UpdateStatus").AutoOpen(false).Modal(true).Width(550).Height(370).AutoFormat(Skins.Office2007Black).Resizable(false) %>
<%=Html.Syncfusion().Button("button").ClientSideOnClick("onclick").Text("Click to open the dialog")%>
<script type="text/javascript">
function onclick(sender, args) {
$("#divUpdateStatus").dialog("open");
}
</script>
</code>
Share more details or issue reproducible steps in detail and we will see what’s wrong with your code.
Regards,