I have this Example here i have added a check box in popover. The added check box is not responding to any event neither model is set on checkbox selection.
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" name="isAnonymous" ng-change="setAnonymous(this)" ng-model="isAnonymous"/>
</label>Post as anonymous
</li>
A breaking change was introduced into UIWebView for iOS 9. Other platforms should work just fine.
iOS 9 Potential Breaking Change
Preparing for iOS 9
Related
When scrolling a view with a textarea, the text area changes height while scrolling. After scrolling the original height is restored. This happens both in the Chrome device emulator and on iOS/Safari. See video for example:
https://www.youtube.com/watch?v=iMYaScyFL74
This example is based on the tabs example application
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<textarea rows="10" placeholder="Write something then scroll the view while the textarea is focued"></textarea>
</label>
</div>
</ion-content>
Note that you have to enable the device emulator in Chrome to reproduce the problem. You can find the full source here:
http://codepen.io/moberg/pen/myyYMJ
Anyone knows how to make the textarea preserve its size while scrolling?
This is a known issue: https://github.com/driftyco/ionic/issues/1934
A fix seems to be ready to be merged atm: https://github.com/driftyco/ionic/pull/3007
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
<div class="form-group">
<!-- Password-->
<label class="control-label" for="password">Password</label> <input type="password" id="password" name="password" class="form-control">
</div>
Consider following snippet. It complies with tb3. The problem is whenever I try to type anything into this field in safari - nothing gets written inside. Blinking cursor becomes active on field input during typing but no characters/black dots appear inside the field.
ff, chrome and even ie work ok. Basically on the picture I type but cursor stays at the same place no input at all.
I turned off all my scripts and problem still persists. If I change type to text it starts to work or if I remove form-control it works. But both are required...
Safari version 5.1.7 - version for windows
Thanks,
The solution that I implemented in my case is adding this line of CSS to element
.SafariFix{
-webkit-user-select:auto;
}
here is HTML of button
<input type="text" placeholder="Search by name" class="btn btn-default SafariFix" id="friendsearchinput">
note (this will work for safari 6 but I am not sure for previous version )
I had the problem that I used
padding: 20px 13px;
which caused issues on the input element. The input text and the placeholder weren't visible in Safari, but worked in any other browser.
I fixed it by using
padding: 0 13px;
height: 45px;
which looks the same but works in Safari.
I had the same problem: You could try to change the font-family of the password input field, for example:
style="font-family:Arial"
and then it should work as expected :-)
I have a few radio buttons that are displayed like regular buttons, they look like this:
<div class="buttoncontainer" style="position:relative; left: 80px;">
<label><input type="radio" name="toggle" checked="checked" class="_today"> <span class="css3button-left">Today</span></label>
<label><input type="radio" name="toggle" class="_tomorrow"><span class="css3button">Tomorrow</span></label>
<label><input type="radio" name="toggle" class="_weekend"><span class="css3button">This Weekend</span></label>
<label><input type="radio" name="toggle" class="_nextmonth"><span class="css3button-right">Next Month</span></label>
</div>
I change the buttons appearance when selected like this:
.buttoncontainer input:checked + span
{
...
}
This works in every browser I tested - IE, FireFox, Chrome, and even Safari on my computer , but the appearance will never change to :checked on the Ipad or Iphone using Safari . Does any one have any idea why these buttons don't work only on ipad ?
I suppose you mean that the lables are not clickable?
For some reasons the usual behaviour of the label element does not work on the mobile WebKit out of the box.
Adding label { cursor: pointer; } to the CSS fixes the issue.
I am using jQtouch for my iPhone application,
I need to check box filed, in jQtouch we have the code below like this.
<ul>
<li>
Toggle The <span class="toggle"><input type="checkbox"/></span>
</li>
</ul>
By using this code we can display the
On-Off image, in the it will be by default off position.
But I need the 'On' position by default.
can you some one help me out for this.
The simplest solution is to add "checked" to the <input> tag:
Toggle The <span class="toggle"><input type="checkbox" checked/></span>
IF you want to handle programmaticaly:
$('toggle input[type="checkbox"]').attr('checked', true)
If you put that in your .Ready() (or page loaded function) the checkbox will be checked by default.
I would recommend that you give the Checkbox an id so that you can specify exactly which you want to change:
<ul>
<li>
Toggle The <span class="toggle"><input id="myCheckbox" type="checkbox"/></span>
</li>
</ul>
Then use:
$('#myCheckbox').attr('checked', true)