I have a responsive page built upon bootstrap. For some reason, I cannot get the checkbox to display in an iOS built device. The checkboxes work in every browser imaginable, and even work in the developer module of chrome (emulating iOS devices) and even works in the iOS reader. It just will not display on an iPhone. Is it being hidden behind another element?
Thanks in advance!
http://www.johnstoncc.edu/FA/2/depnbrhhc.html
Changing the column sizes to the following fixes it.
<div>
<div class="col-xs-2 col-sm-2 col-lg-1" style="margin-top:20px;">
<input id="OBKey_Signed_1" type="checkbox" name="OBKey_Signed_1"
value="Y" required="" data-com.agilebits.onepassword.user-edited="yes"
style="-webkit-appearance: radio;">
</div>
<div class="col-xs-10 col-sm-10 col-lg-11">
By checking this box, I ratify the use of my typed name and
Student ID number as an electronic representation of my signature.
</div>
</div>
Related
In all input fields in Chrome appear nonsens texts - some texts, that were written in other text field. It seems, that it is connected with default IDs. It can be probably resolved for text fields with setting custom id with setId(..) method. But it doesn't work for datefields, comboboxes etc. while the id is set for the parent div not the input itself eg.:
<div role="combobox" class="v-filterselect v-widget small v-filterselect-small v-has-width" id="Field-1553856663994" style="width: 100%;" autocomplete="off">
<input type="text" class="v-filterselect-input" autocomplete="nope" id="gwt-uid-134" aria-labelledby="gwt-uid-133" style="width: 100%;" tabindex="0" dir="">
<div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>
Is the way in Vaadin to set id for inner element or to disable completion in Chrome?
Chrome the behavior on autocomplete attribute changed a while ago, but it has been until recently we made a change in our implementation according to that in Vaadin 8.
There is lengthy discssion about this in our issue tracker;:: https://github.com/vaadin/framework/issues/11437
I am facing a strange behaviour of IONIC 1 IOS application in IOS 11.0.3 .
I had a list of Item and which I rendered on screen via using ng-repeat via using following code. i.e
<div class="list-container" ng-cloak>
<div ng-repeat="message in messageCtrl.messageList track by $index" ng-class="messageCtrl.checkClass
(message);" class="messages" ng-cloak>
<div class="message" ng-cloak>
<span ng-cloak>
<a href="javascript:void(0);" ng-click="goToSechduleScreen(message, 'present');" ng-cloak>
{{ message.message }}
<strong ng-cloak>{{ message.annotation }}</strong>
<span ng-cloak class="scheduleMessage" ng-if="messageCtrl.doesMessageIsScheduled(message
);"><i class="icon ion-clock"></i></span>
</a>
</span>
<div class="datetime" am-time-ago="message.date_created" ng-cloak></div>
</div>
</div>
</div>
The above code is working fine in all IOS device which is running on IOS 10 or lower. but in IOS 11.0.3 some "ng-repeat" item are not displayed .when I scroll up and down sometime Items are visible or some not.
Please check following screen-short for better clarity.
When some items are displayed and some items are not,
When all items are displayed sometime when I scroll up and down,
when just only single item displayed and rest of item are not displayed
Any kind of help or suggestion is appreciated.
Thanks in advance.
I'm using Material Design Lite (http://getmdl.io) along with dialog-polyfill (https://github.com/GoogleChrome/dialog-polyfill) for the modal dialog boxes.
Everything works great on my desktop browsers (Chrome, Safari, etc.), but on iOS (both Chrome and Safari), I can't tap inside the modal dialog boxes. It just doesn't respond.
I've tried the suggestion I've seen posted several places to put "cursor: pointer" in the CSS, but either I'm not doing it correctly, or it's not working.
Here's a typical modal dialog from my code:
<dialog class="mdl-dialog" id="delete_alias_confirm_dialog">
<h4 class="mdl-dialog__title">
Delete alias
</h4>
<div class="mdl-dialog__content" id="delete_alias_confirm_dialog_content">
<p>
Alias [ALIAS NAME] has been successfully deleted.
</p>
<form action="#">
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onClick="delete_alias_confirm_dialog.close()" id="delete_alias_confirm_dialog_ok_button">OK</button>
</div>
</form>
</div>
</dialog>
<script>
var delete_alias_confirm_dialog = document.querySelector('#delete_alias_confirm_dialog');
if (! delete_alias_confirm_dialog.showModal) {
dialogPolyfill.registerDialog(delete_alias_confirm_dialog);
}
var delete_alias_curr_name=""
function show_delete_alias_confirmation(clicked_element) {
delete_alias_curr_name=((clicked_element.parentNode).parentNode).parentNode.parentNode.querySelector('#alias_name').innerText
var delete_alias_dialog_delete_button=document.querySelector('#delete_alias_dialog_delete_button');
var delete_alias_dialog_alias_name=document.querySelector('#delete_alias_dialog_alias_name');
delete_alias_dialog_alias_name.innerHTML=delete_alias_curr_name
delete_alias_dialog.showModal();
delete_alias_dialog_delete_button.blur();
}
</script>
Check the order in which you load the CSS.
If you are loading dialog-polyfll.css before material.min.css that might be the source of the problem.
Also check if you don't have a dialog duplicate, this also results on a dialog that can't be closed on IOS.
I have a AngularJS mobile web site that works really well on iPhone 5, iPhone 5s (both running iOS 8) and also on my iPad (iOS 8 as well). However, the 'login' button does not work on the iPhone 6 (e.g. you click it and nothing happens). That exact same website works on the other iOS mobile platforms no problems at all. This doesn't make sense to me because they are all iOS 8?
On a side note, the website does work on an iPhone 6 emulator via Browser Stack but just not on a physical iPhone 6. I am not sure if it is a default setting on the iPhone 6 but I couldn't find anything.
Here is the code that is invoked when the login button is clicked:
The code snippet for the mark-up is:
<div class="col-sm-6 bordered-form field-padding">
<form name="loginForm" role="form" novalidate>
<div class="row">
<div class="col-sm-12">
<h4>Existing employers login</h4>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input type="email" name="email" ng-model="user.email" placeholder="Please enter your email address" class="validatedInputField" required>
<span ng-show="loginForm.email.$valid" class="glyphicon glyphicon-ok icon-success"></span>
<span ng-show="loginForm.email.$invalid && loginForm.email.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input type="password" name="password" ng-model="user.password" placeholder="Please enter your Password" class="validatedInputField" required ng-minlength="6">
<span ng-show="loginForm.password.$valid" class="glyphicon glyphicon-ok icon-success"></span>
<span ng-show="loginForm.password.$invalid && loginForm.password.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
</div>
<div class="col-sm-12">
<button class="btn btn-success" ng-disabled="loginForm.$invalid" ng-click="authenticate()"><span class="glyphicon glyphicon-thumbs-up"></span> Login</button>
</div>
</div>
</form>
</div>
The angular function is here:
$scope.authenticate = function(){
var credentials = "Basic " + $window.btoa( this.user.email + ":" + this.user.password );
$http.get( ENV.apiEndpoint + '/auth/basic/',
{headers: {'Authorization': credentials}})
.success( function(data, status, headers, config){
AuthorisationService.LoginUser(data);
}).
error( function(data, status, headers, config) {
ErrorLoggingService.logError( data, status, headers, config );
});
}
Angular version: 1.2.15
Bootstrap version: ~3.0.3
Has anyone experienced this problem on the iPhone 6?
As I don't have access to a physical iPhone 6, I am having some problems isolating the issue. If someone has access to an iPhone 6, I could give them access to a test account on my website and they could replicate the issue really quickly.
Any help would be greatly appreciated.
I debugged this on the actual iPhone 6 that was having the problem and I saw that it was failing when the token returned by the server was being stored in session storage.
I called up Apple support and spent a fair bit of time on the phone with them. The page was working on other iPhone 6 devices but not this one. After trying a few different settings and confirming it was working on Chrome, the fantastic Apple support person asked me to see if the page was set to 'private'.
On the bottom right of the safari browser, you click an icon and you can set individual websites to 'private'. Unchecking this made the website work and I could store the token in session storage. It appears that my client accidentally set the website to 'private' and this was causing the issue.
Hopefully this will save someone else some time with a similar issue. Full credit to Apple support who spent over an hour to resolve this issue.
I have used JQM SimpleDialog2 in my app. I am having one textbox and button in that dialog. i can't able to get the value from input while click on button in dialog. i have used blank mode.. Here is my code.. I am getting empty value from this code. please correct me.
<div id="myDialog" style="display:none"
data-options='{"mode":"blank","top":"10%","headerClose":false,"blankContent":true}'
<Center>please enter Your Amount here</center>
<input id="txtAmt" name="amy" value="" type="text" placeholder="Amount">
<div data-role="navbar" data-grid="a">
<ul>
<li>Submit</li>
<li>Cancel</li>
</ul>
</div>
function getAmount()
{
alert("amount: "+$("#txtAmt").val());
}
i didnt try this using SimpleDialog but this works just fine for me:
function getAmount(){
alert (document.getElementById('txtAmt').value);
}
By the way i would recommend using the built-in Popup-Dialog function instead of SimpleDialog. See here: http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html