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
Related
I am using a simple form to send an email but on my device the click is not firing anything.
Here is my code:
<form class="form-inline" action="mailto:user#gmail.com?subject=oggetto" method="post" enctype="text/plain">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Nome e Cognome</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Nome e Cognome">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="bambini" class="sr-only">Numero bambini</label>
<input type="name" name="bambini" class="form-control" id="numBambini" placeholder="Numero di bambini">
</div>
</div>
<div class="col-md-4 col-sm-4">
<input type="submit" class="btn btn-default btn-block">
</input>
</div>
</form>
I tried also with
the tag button type="submit"
with no luck.
My code is working fine on Chrome desktop but on my samsung device works only with Samsung Internet and not with Chrome (I also got the same with a samsung p20).
Any idea on how to fix it?
Thanks
I'm trying to test the login process of an internal web application using a mobile emulated chrome browser. I am using Python 3.6.4.
It finds the element by name, but won't click it!
Here is my code:
from selenium import webdriver
enter code herefrom selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import Select
import time
mobile_emulation = {
"deviceMetrics": { "width": 360, "height": 640, "pixelRatio": 3.0 },
"userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19" }
chrome_options = Options()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(chrome_options = chrome_options)
driver.get("https://internalweburlhere")
elem = driver.find_element_by_id("txtEmailAddress")
elem.clear()
elem.send_keys("Username")
elem = driver.find_element_by_id("txtPassword")
elem.send_keys("1234")
print("Password Entered")
driver.find_element_by_id("btnSignIn").click()
print("Logged In")
Here is the website source:
<div id="divSignIn" class="login-content-sign-in" style="display:block;">
<div id="divSignInHeader" class="login-content-header text-bold-10 label-colour" MandatoryField="False">Sign in using your Portal account</div>
<div id="divSignInMessage" class="login-content-sign-in-message success-label-colour text-bold-9" MandatoryField="False" style="DISPLAY:none;">Your account email address has now been verified, please enter your password and sign in</div>
<div id="upSignIn">
<div id="divSignInEmailAddress">
<div id="lblEmailAddress" class="entry-label">Enter your email address</div>
<div>
<input name="txtEmailAddress" type="email" id="txtEmailAddress" aria-autocomplete="none" autocomplete="off" maxlength="50" class="login-content-email-address entry-control entry-control-colour entry-control-border text-9" onkeyup="checkSignInButton()" />
</div>
</div>
<div id="divPassword">
<div id="lblPassword" class="entry-label" MandatoryField="False">Enter your password</div>
<div>
<input name="txtPassword" type="password" id="txtPassword" aria-autocomplete="none" autocomplete="off" class="login-content-password entry-control entry-control-colour entry-control-border text-9" onkeypress="checkCapsLockStatus(event,'divSignInCapsLock')" onblur="hideCapsLockStatus('divSignInCapsLock')" onkeyup="checkSignInButton()" />
<div id="divSignInCapsLock" class="login-caps-lock-status">
<div id="divCapsLockDetail">
<img src="/Portal_Benchmark/Static/5.8.0.192/Images/dlg_icon_Exclamation.png" class="login-caps-lock-image" />
<span id="lblCapsLockMessage" class="login-caps-lock-message text-8" MandatoryField="False">Caps Lock Is On</span>
</div>
</div>
</div>
</div>
<div id="divSignInCaptcha" class="login-content-sign-in-captcha">
<div id="lblSignInCaptcha" class="entry-label">Enter the captcha text shown below </div>
<input type="hidden" id="objSignInCaptcha_clientState" name="objSignInCaptcha_clientState" /><div id="objSignInCaptcha" class="ig_Control igc_Control"><div class="igc_CaptchaImageArea"><img src="WebCaptchaImage.axd?guid=588a4174-70ca-4bf6-ac10-7ac77f74e6a4" title="" alt="" height="60" width="175" class="igc_CaptchaImage" /><input type="hidden" id="objSignInCaptcha__SignInEditor_clientState" name="objSignInCaptcha__SignInEditor_clientState" /><input title="{0}" id="objSignInCaptcha__SignInEditor" aria-autocomplete="none" autocomplete="off" onkeyup="checkSignInButton()" readonly="readonly" name="objSignInCaptcha__SignInEditor" maxlength="8" class="igc_CaptchaInput igte_Edit" type="text" style="width:175px;text-align:notset;" /></div><div class="igc_RefreshAndAudioButtonsArea"><img alt="Listen to Captcha Audio" id="x:1812979435.0:mkr:AudioButton" src="Static/5.8.0.192/PortalStyleSheets/Infragistics/Default/images/igc_AudioButton.gif" /><a id="x:1812979435.1:mkr:RefreshButtonLink" href="#"><img alt="Refresh Captcha Image" id="x:1812979435.2:mkr:RefreshButton" src="Static/5.8.0.192/PortalStyleSheets/Infragistics/Default/images/igc_RefreshButton.gif" /></a></div><div style="clear:left;"></div></div>
</div>
<div class="login-content-sign-in-panel">
<div id="lblError" class="login-content-sign-in-error warning-label-colour text-bold-9">
</div>
<div class="login-content-sign-in-button">
<input name="btnSignIn" type="submit" id="btnSignIn" disabled="disabled" value="Sign In" />
</div>
</div>
</div>
Can anybody suggest how I might get around this? Interestingly, when I run similar code at BrowserStack on an android chrome browser, the clicks work as intended. Just not when I run it locally.
Some time element present in DOM but selenium failed to wait until the attribute get removed . Possible guess is In your case it is not waiting for remove attribute disabled="disabled" from your input tag and performing the click, even you can't see any exception.
So in such case you have to inject javascript in your browser and perform the action as given below :
element = driver.find_element_by_id("btnSignIn")
driver.execute_script('arguments[0].click();', element)
In the signin page of my ionic 2 app, I have the following:
<form [formGroup]="signinForm" (submit)="onSubmit($event)" style="padding-top: 20px;">
<div class="formItem">
<ion-input #username type="text" placeholder="Username" formControlName="username" autocapitalize="off"></ion-input>
</div>
</form>
This produces a weird 1-pixel-wide artifact.
Here is what it produces on the page:
<div class="formItem">
<ion-input formcontrolname="agencyNumber" placeholder="Agency ID" type="text" class="input input-md ng-untouched ng-pristine ng-valid" ng-reflect-name="agencyNumber" ng-reflect-placeholder="Agency ID" ng-reflect-type="text">
<input class="text-input ng-untouched ng-pristine ng-valid text-input-md" formcontrolname="agencyNumber" placeholder="Agency ID" autocomplete="off" autocorrect="off" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md" ng-reflect-model="test9994" ng-reflect-type="text" type="text" ng-reflect-placeholder="Agency ID">
<!--template bindings={
"ng-reflect-ng-if": "true"
}-->
<input aria-hidden="true" next-input="" ng-reflect-type="text" type="text">
<button class="text-input-clear-icon disable-hover button button-md button-clear button-clear-md" clear="" ion-button="" type="button" ng-reflect-hidden="true" hidden="">
<span class="button-inner"></span>
<div class="button-effect"></div>
</button><!--template bindings={
"ng-reflect-ng-if": "true"
}-->
<div class="input-cover" tappable=""></div>
</ion-input>
</div>
That weird little artifact appears to be the second input field:
<input aria-hidden="true" next-input="" ng-reflect-type="text" type="text">
What is this? Why is it appearing?
EDIT: I have updated to ionic 2.0.0 with latest supported dependencies, and the problem persists.
I believe thats from a validator from your FormBuilder. It is supposed to turn red and underline the field if you fill it out and happens to be invalid. You should be able to remove it by editing the ng-valid and ng-invalid classes and making
Hello everyone i have been working alot on my app and added form validation with angularjs. so i used this form ng submit to trigger a function if my inputs and variables contains what they should be.
below is the sample of my login form html
<form ng-submit="login_form.$valid && login()" name="login_form">
<li align="center">
<img src="img/xiroos-logo.png" alt="Xiroos Logo">
</li>
<li>
<div class="form-group">
<sup>Email</sup>
<input type="text" name="userName" ng-model="userName" class="input-text form-control input-lg" ng-class="((login_form.userName.$valid)?'valid':'invalid')" ng-required="true" placeholder="sample#email.com" />
</div>
</li>
<li>
<div class="form-group">
<sup>Password</sup>
<input type="password" name="password" ng-model="password" class="input-text form-control input-lg" ng-class="((login_form.password.$valid)?'valid':'invalid')" ng-required="true" placeholder="• • • • • • • •" />
</div>
</li>
<li>
<xr-loading status='loading'></xr-loading>
<input type="submit" ng-init="btnText='Login'" ng-click="!login_form.$valid && xrAlert({'title':'Oops!','body':'Fill all required fileds.'})" class="btn btn-block btn-round btn-orange shadow" ng-value="btnText" />
</li>
<li align="center">
<p><small><a ui-sref="forgot_password">Forgot your password?</a></small></p>
</li>
</form>
If i try to login without putting anything in my inputs. i will get a popup modal to fill up required fields. I'm testing my app in my browser of course. then when i tried to parse my app to mobile app. and i tried on my android.
It seems it doesn't trigger my form submit and also it doesn't show my popup modal on ng-click of my login button
Oopps. problem solved, the parsing of my apk maybe got some problem, and i tried to parse it again using cordova and now it works.
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.