I have an ionic angular template file like this:
<ion-list>
<!-- Search Hotels -->
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="hotelSearch" ng-focus="tap.focus()" ng-blur="tap.blur()">
</label>
</div>
<!-- List of Hotels -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="hotel in hotels |filter: hotelSearch | orderBy: '-popularity' | limitTo: 10" type="item-text-wrap" href="#/tab/hotels/{{hotel.id}}" ng-show="tap.tapped">
<img ng-src="">
<h2>{{hotel.name}}</h2>
</ion-item>
It works perfectly when I use it in browser using ionic serve. But fails in android simulator. the ng-focus can be simulated by using on-tap.
What is the equivalent of ng-blur in ionicframework?
This answer pointed me in the right direction: if you defined a similar function in your controller:
$scope.blurCallback = function(){
// do some amazing stuff here ...
}
then in your markup you can use:
<input ... onblur="angular.element(this).scope().blurCallback()">
Just use
onblur="fnx()"
It may work!!
Related
I have a very basic search page with dropdowns and text boxes.
The snippet looks like following
<div class="container" style="width: 100%;">
<div class="row">
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
<span class="input-group-addon" id="basic-addon2">Business Name</span>
#Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" })
#Html.TextBoxFor(m => m.Parameters.BusinessName, new { #maxlength = 50, #class = "form-control", #placeholder = "Enter a business name", #aria_describedby = "basic-addon2", #style = "width:350px;" })
</div>
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
#Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) #Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { #class = "form-control", #style = "width:150px;" })
</div>
</div>
</div>
And on the page this snippet looks like following.
I use bootstrap 3.3.5 and jQuery 2.1.4.
It works perfectly fine on desktop, android tablet, and android phone, when I use Chrome as a browser.
However, both textbox and dropdown break completely (break as becoming completely unusable) when I try viewing it on the newer versions of iPhone ios Chrome browser.
Interestingly enough, when I tried to emulate it in Chrome as the iPhone X, it worked fine as well.
I am completely new to the whole ios topic. Doing some basic research led me to believe that older versions of bootstrap/jquery might be the issue.
Trying to update to bootstrap 4, which also leads to updating jquery to 3.0.0, completely breaks the whole application, so I had to revert it back.
Before I dive too deep into fighting the whole bootstrap/jquery thing, can anyone please provide me any useful pointers to why ios is so picky? I want to get at least the basic understanding of what the problem is before I start digging into possible solutions.
I have added two example with help of (Bootstrap-4) as your posted instruction.1st - Break textbox and dropdown on mobile.2nd - Not break textbox and dropdown on both Desktop & Mobile.
You can check below snippet.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="py-3">
<div class="container l">
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
</div>
<div class="col-md-8 my-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-md-4 my-2">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
</div>
<div class="col-8 my-2 pr-1 pr-md-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-4 my-2 pl-1 pl-md-3">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
</div>
</div>
On Clicking Select Box on Ionic SELECT, it returns nothing on the interface although the option values exist.
I read around and I found out it was a bug on IONIC when IONIC automatically removes the 300ms delay in order to make Ionic apps feel more “native” like.
This only happens on Android OS .
There is another question posted about this.
How can I get Ionic select box working on Android again?
It is shown that upon clicked, there is no response to show the option list.
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<div class="input-label ng-binding"> TESXX</div>
<span class="help-block"></span>
</label>
<label class="item item-input">
<span class="input-label">Balance</span>
<div class="input-label ng-binding"> 1,200,100 </div>
<span class="help-block"></span>
</label>
<label class="item item-input">
<span class="input-label">Direction</span>
<select ng-model="formData6.dir" name="dir" class="ng-pristine ng-valid ng-touched">
<option ng-selected="1" value="0" selected="selected">From</option>
<option value="1">To</option>
</select>
</label>
</div>
Anyone still using Ionic 1, the solution to this is to allow browser's default behavior on taping a select (in Ionic 1.2.4 this was found at line 3060).
I am trying to install an application made in meteor in my Android mobile. The application is build through
meteor build /home/sampad/meteor_apk --server 192.168.1.27:3000
This app consist of 2 templates. When I click on submit it takes me to the next template when run in desktop through meteor. But when running it in mobile the submit button click does not take me anywhere, also I cannot see any error.
Attaching the code:
<!-- main.html -->
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accounts Page</a>
</div>
</div>
</nav>
<div class="container">
{{#if currentUser}}
{{>dashboard}}
{{else}}
{{> register}}
{{> login}}
{{/if}}
<hr>
</div>
<template name="register">
<form>
<h3>Registration Page</h3>
E-mail : <input type ="text" id="email"><br>
Password : <input type="password" id="password"><br>
<input type="submit" value="Save details"> <input type="reset" value="Reset">
</form>
</template>
<template name="login">
<form>
<h3>Log In Page</h3>
E-mail : <input type ="text" id="login-email"><br>
Password : <input type="password" id="login-password"><br>
<input type="submit" value="Log In"> <input type="reset" value="Reset">
</form>
</template>
<template name="dashboard">
<p> You 're logged in </p>
<p><a href ="#" class="logout" >Log Out</a></p>
</template>
<!-- main.js -->
if(Meteor.isClient)
{
Template.register.events({
'submit form':function(event,template){
event.preventDefault();
var emailVar = template.find('#email').value;
var passwordVar = template.find('#password').value;
//template.find('#message').append("Clicked submit");
console.log('Form submitted');
Accounts.createUser({
email:emailVar,
password:passwordVar
});
}
});
Template.login.events({
'submit form':function(event,template){
event.preventDefault();
var emailVar = template.find('#login-email').value;
var passwordVar = template.find('#login-password').value;
Meteor.loginWithPassword(emailVar,passwordVar);
}
});
Template.dashboard.events({
'click.logout':function(event){
event.preventDefault();
Meteor.logout();
}
});
}
Maybe try with explicitly specifying the protocol to reach your server?
--server http://192.168.1.27:3000
I have started work on Phonegap and it is very hard for Native App developer to go for Hybrid.
Just want to know that how I can show configuration screen only once in Phonegap. Below is the screenshot. I just want to show it only when user runs an app first time, and not again and again whenever user launches an app and saves IP address.
The problem here is that, whenever I press back button of device, this screen gets display.
Here is my HTML:
<body>
<div data-role="page" id="pageConfig"> // This Div needs to show only first time
<div class="ui-content" data-role="main">
<h3>Configurations</h3>
<label for="ipText">IP Address:</label>
<input type="url" id="ipText" name="ipText" />
Save
</div>
</div>
<div data-role="page" id="pgLgn">
<div data-role="main" class="ui-content">
<form id="form1" class="validate">
<div class="ui-field-contain">
<label for="usrNme">Username:</label>
<input type="text" name="usrNme" id="usrNme" placeholder="Username" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<label for="pswrd">Password:</label>
<input type="password" name="pswrd" id="pswrd" placeholder="Password" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<input type="checkbox" id="chbx-0" class="custom" data-inline="true" />
<label for="chbx-0">Remember me</label>
</div>
<input type="submit" data-inline="true" value="Login" id="btnLogin" data-shadow="false" data-theme="a" onclick="OnLoginClick()"/>
<input type="reset" data-inline="true" value="Reset" data-shadow="false" />
</form>
</div>
</div>
</body>
What Cordova Plugin I need?
NOTE: I am using Jquery Mobile and Cordova SQLite Plugin for data storage. And my app is Single Page Architecture.
Thanks in Advance!
Please let me know if not clear.
You have to write this line in device ready function.
document.addEventListener("backbutton",onBackKeyDown,false);
function onBackKeyDown(){
if($.mobile.activePage.attr("id") == "pgLgn"){
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
}
Use localStorage. Save a simple string with key and check whether there is a particular value against key or not in deviceready function.
is there any known issue of bootstrap 3.0 (the latest one) on android phonegap. I am able to see the buttons nicely on firefox (and on same resolution as on phone) but when the binary is installed on the phone the buttons do not render....
is this a known issue ?
Following is my simple template:
<div id="mcontent">
<div id="swrapper">
<div id="islider">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">Mrs</a>
<a class="btn btn-default" href="#">Ms.</a>
<a class="btn btn-default" href="#">Mr.</a>
</div>
<form>
<input type="text" name="firstname" placeholder="Firstname">
<input type="text" name="lastname" placeholder="Last Name">
<p><input type="text" name="email" placeholder="Email"></p>
<p>Must be at least 8 characters long</p>
<input type="password" placeholder="Password">
<input type="password" placeholder="Password repeat">
<p><button type="submit" class="btn btn-primary btn-large btn- block">Submit</button></p>
<p><span id="dclaimer">By registering you confirm that you accept our Terms of Use and Privacy Policy</span></p>
</form>
</div>
</div>
</div>
I know this is an old post but I have had the same issue. I believe this is down to jquery mobile. As when i removed it, it worked
Removing just the css of jquery mobile seems to keep jquery mobile functionality and allow bs to work