Last active
October 13, 2022 15:07
-
-
Save mlynch/064d27912b511a63caa3 to your computer and use it in GitHub Desktop.
ionRadio fix for iOS 9 bugs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* ionRadioFix - fixes a bug in iOS 9 UIWebView that breaks the tilde selector in CSS. To | |
* use this fix, include it after your Ionic bundle JS. | |
* | |
* Note: due to Angular directive override limitations, you'll need to change any reference | |
* to <ion-radio> to <ion-radio-fix> to apply this patched radio button. | |
* | |
* Also, make sure to add the new CSS from the second part of this gist. | |
*/ | |
angular.module('ionic').directive('ionRadioFix', function() { | |
return { | |
restrict: 'E', | |
replace: true, | |
require: '?ngModel', | |
transclude: true, | |
template: | |
'<label class="item item-radio">' + | |
'<input type="radio" name="radio-group">' + | |
'<div class="radio-content">' + | |
'<div class="item-content disable-pointer-events" ng-transclude></div>' + | |
'<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' + | |
'</div>' + | |
'</label>', | |
compile: function(element, attr) { | |
if (attr.icon) { | |
var iconElm = element.find('i'); | |
iconElm.removeClass('ion-checkmark').addClass(attr.icon); | |
} | |
var input = element.find('input'); | |
angular.forEach({ | |
'name': attr.name, | |
'value': attr.value, | |
'disabled': attr.disabled, | |
'ng-value': attr.ngValue, | |
'ng-model': attr.ngModel, | |
'ng-disabled': attr.ngDisabled, | |
'ng-change': attr.ngChange, | |
'ng-required': attr.ngRequired, | |
'required': attr.required | |
}, function(value, name) { | |
if (angular.isDefined(value)) { | |
input.attr(name, value); | |
} | |
}); | |
return function(scope, element, attr) { | |
scope.getValue = function() { | |
return scope.ngValue || attr.value; | |
}; | |
}; | |
} | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* This CSS uses adjacent selectors instead of general sibling (~) selectors | |
* for ion radio that are broken in iOS 9 UIWebView. | |
* | |
* To apply the patch, include this CSS after your ionic.css include. | |
*/ | |
.item-radio input:checked + .radio-content .item-content { | |
/* style the item content when its checked */ | |
background: #f7f7f7; | |
} | |
.item-radio input:checked + .radio-content .radio-icon { | |
/* show the checkmark icon when its checked */ | |
visibility: visible; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for this patch. Is it still needed now that 1.1.1 is out ?
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md