I have a Input text type search the problem is when a i run the app on emulator its working fine. But when i run the app on the device and enter a character in the Input field it shows two text box at that time I don't know why its happening .
Here is the code for Input Text:
<div data-role="header" data-position="fixed">
<h1>CRM</h1>
<div class="srchdiv" data-theme="b" , data-overlay-theme="b">
<input type="search" placeholder="Search" data-icon="search" id="searchfield">
<a href="#popupMenu1" class="btn_delete" data-rel="popup" data-role="button" data-inline="true" data-icon="deletebtn" data-transition="pop" ></a>
</div>
</div>
and the CSS file i used is:
.srchdiv{
top:43px;
position:fixed;
width:100%;
margin:0;
padding:0;
background-color: #999999;}
Thanks in advance
Related
Some text (not all) in the div suddenly go to new line while the text is not reach the max width of the div. For example:
With this long text, in the view it show correctly: "UMI TERIYAKI & SUSHI", this text is placed on the same line in my div.
My HTML:
<listitem><div style="width: 100%;background-color: white; margin-bottom: 1px;">
<div class="row">
<div class="col">
<div class="row font-weight-bold ng-binding">UMI TERIYAKI & SUSHI</div>
<div class="row ng-binding">MONTREAL ROAD</div>
</div>
</div>
</div>
</listitem>
Result in browser:
UMI TERIYAKI & SUSHI
MONTREAL ROAD
But with this shorter text: "MACS SUSHI", "MACS" and "SUSHI" are placed on two seperated lines in my div => I expect these text are placed on the same line too because the text length is not reach the max width of div no need to go to the new line.
My HTML:
<listitem><div style="width: 100%;background-color: white; margin-bottom: 1px;">
<div class="row">
<div class="col">
<div class="row font-weight-bold ng-binding">MACS SUSHI</div>
<div class="row ng-binding">BAYSHORE DRIVE</div>
</div>
</div>
</div>
</listitem>
Result in browser:
MACS
SUSHI
BAYSHORE DRIVE
Can you paste the code?
Edit
There's no problem with the code in the div. The <listitem> and <div>'s are fine themselves.
It's more likely the width of the div on the page is the problem. But I don't know for sure without seeing more of the code.
You could try giving the <div> in question a background color to clearly see it's actual size.
I am trying to create a mobile-only site using ASP.NET MVC and Bootstrap. I've created a form, part of which appears below.
<form action="/Client/InitializeProgram" class="form-horizontal" method="post" role="form">
<div class="wizard-step">
<h4>General Information</h4>
<div class="form-group">
<label class="col-md-2 control-label" for="DateOfBirth">Date of Birth</label>
<div class="col-md-10">
<input Placeholder="MM/DD/YYYY" class="form-control" data-val="true" data-val-date="The field Date of Birth must be a date." data-val-required="Date of birth is required" id="DateOfBirth" name="DateOfBirth" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DateOfBirth" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Gender">Gender</label>
<div class="col-md-10">
<div class="radio">
<input checked="" id="Gender_0" name="Gender" type="radio" value="0"></input>
<label for="Gender_0">Male</label>
</div>
<div class="radio">
<input id="Gender_1" name="Gender" type="radio" value="1"></input>
<label for="Gender_1">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Height</label>
<div class="col-md-10">
<input Placeholder="Feet" class="form-control" data-val="true" data-val-number="The field HeightFeet must be a number." data-val-required="The height feet is required" id="HeightFeet" name="HeightFeet" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightFeet" data-valmsg-replace="true"></span>
<input Placeholder="Inches" class="form-control" data-val="true" data-val-number="The field HeightInches must be a number." data-val-required="The height inches is required" id="HeightInches" name="HeightInches" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightInches" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
I'm using my Android phone for testing and have noticed something strange. When the page with my form is fist loaded, everything fits within my phone's display, exactly as expected.
But when I click in one of the text boxes, it appears to zoom in slightly, making my page content a little wider than my phone. So a small portion of the page is not visible unless I scroll horizontally.
If I rotate my phone into landscape orientation, the display is wider. However, it appears that phone zooms again so that the page is again a little too wide for the display (by about the same percent).
I can't tell what's going on and am having trouble finding anything on this. Has anyone here seen this? Can anyone explain what's happening? My preference is to format my page so that it fits within my device's display.
EDIT
If it makes any difference, I have the following in <head> section of my page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also, I have the following CSS on this page. It was provided by someone else who was helping me to get my tables to fit within the phone screen.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/*
Re-enable word wrapping in table cells.
Can we simplify with .table-responsive > .table th, .table-responsive > .table td ?
*/
#media screen and (max-width: 767px) {
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: normal;
}
}
It happens on Iphones too, not sure if it is the same cause on Android but setting the font-size to 16px on every control seems to stop the auto zooming effect on Iphone.
Here is the css to set font-size on every control:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
font-size: 16px !important;
}
I am trying to view my website in the default browser that comes with my Samsung Galaxy Android phone, but it isn't working properly. I can't seem to enter text into a popup login form. When I try to enter my username the HTML input gets focus and the predictive search starts to work, but it won't enter any text into the input field. I can however enter text successfully into other form inputs that are on my page (these forms are not in popup divs).
I'm guessing it has something to do with the fact that my form is in a absolute positioned div that appears when the user clicks on the login button.
A couple of my colleagues have tried the page on their android phones and are able to enter text as they should, so I think this is a OS/Browser specific problem. I'm running Android 2.3.3 and using the default browser that comes with that.
This is the css for the the login div and form inputs:
.loginPanel{z-index:2000;width:341px;border-bottom-left-radius:3px;border-bottom-right- radius:3px;background:#3DB44A;position:absolute;clear:left;margin:0 0 0 0;top:57px;display:none;padding:5px 0 0 0;}
.loginPanel input[type=text]{width:280px;height:40px;margin:0 auto;display:block;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font:bold 12px Arial;color:#353535;padding:0 10px;}
And here is the HTML
<div class="loginPanel" style="margin-left: -246px; display: block;">
<form id="user_form_login" class="global_form_box" enctype="application/x-www-form-urlencoded" action="/login" method="post">
<div class="close">
<a id="login-close" href="#">
<img alt="" src="themes/network90v2/landing_images/close.png">
</a>
</div>
<div class="clear">
<input id="email" type="text" placeholder="Email" name="email">
</div>
<div id="username-required" class="form-label-required">
<span class="form-block-required">email is required</span>
</div>
<div id="username-invalid" class="form-label-required">
<span class="form-block-required">email is not valid</span>
</div>
<div class="clear">
<input id="password" type="password" placeholder="Password" name="password">
</div>
<div id="password-required" class="form-label-required">
<span class="form-block-required">password is required</span>
</div>
<div class="clear forgotten">
<span>
Forgot Password?
</span>
</div>
<div class="submit-top"></div>
<div class="remember submitMain">
<input id="login-submit" type="submit" value="Login">
<input id="remember" type="checkbox" name="remember" value="1" tabindex="4">
Remember Me
I'm hoping that this can be fixed using CSS. If anyone has a solution/ had the same problem, I would really appreciate your help.
PS I would really prefer to keep the login form as a popup, so Ideally any solutions will allow me to do this.
I've had a similar problem with a mobile site that behaved strangely on Android 2.2. From memory, I had to use position: fixed instead of absolute to get around it. Not sure if that will work with your design though.
So, i'm scratching my head here in frustration at the android browser! Android version 2.3.6.
What is wrong with this thing? The next and before(perhaps previous) buttons
do not work! ...on some basic jquery form fields.
Having:
<div data-role="page">
<div data-role="header">
<img src="img/logo.png" style="margin-top:15px;">
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
</form>
</div>
</div>
But... if I remove data-role="header" the damn thing start working??!!
No problem of course on the Safari browser! Which is superb as usual.
Please can somebody help me?
My understanding is that if you want to add a back button you need to add a data-add-back-btn="true" to your page div. I don't see that in your example. OTOH, the hardware back button should work as well.
What is it that doesn't work?
So, after many hours... i noticed stuff in my css was breaking this functionality...
/*article, aside, details, figcaption, figure, footer, header, hgroup, nav,
section { display: block; } audio, canvas, video { display: inline-block;
*display: inline; *zoom: 1; } audio:not([controls]) { display: none; }
[hidden] { display: none; } html { font-size: 100%; overflow-y: scroll;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }*/
Removed above and it worked.
Not sure, might be the boilerplate used.
I just got my shiny new Nexus 7 and was playing around with Cordova (Phonegap). I created a simple page with a couple of text input fields and a text area. On my iPhone I can click the text fields and the keyboard comes up and I can edit the text. On my Nexus 7 running 4.1.1 Jelly Bean with Cordova 1.9.0, the keyboard comes up but when you type nothing shows up in the text field or text area.
I'm pretty sure my code is fine since it works on the iPhone and Android 2.3.5, but here is the snippet in question just in case:
<body onload="onBodyLoad()">
<div data-role="page" id="mainpage">
<div data-role="header" data-theme="a">
<h2>Lightweight</h2>
</div>
<div data-role="content">
<div>
<a href="#" data-role="button" data-icon="check" data-iconpos="bottom" data-theme="b" onClick=onClickInterrogate()>Interrogate</a>
</div>
<div align="center">
<a href="#" data-role="button" data-inline="true" data-icon="forward" data-theme="b" onClick=downloadFile()>Send</a>
<a href="#" data-role="button" data-inline="true" data-icon="gear" data-iconpos="right" data-theme="b" onClick=onClickSettings()>Settings</a>
</div>
<div align="center">
<label for="serverUrl">Server URL:</label>
<input type="text" name="name" id="serverUrl" value="urlGoesHere"/>
<label for="zipFile">Zip File:</label>
<input type="text" name="name" id="zipFile" value="tran1.zip"/>
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea">urlGoesHere</textarea>
</div>
</div>
<div data-role="footer">
<h1> © 2012 Company Name </h1>
</div>
</div>
I just tried this on Android 2.3.5 and it works fine. Anyone experienced something similar?
The issue persists in 2.1.0 as well.
Here's how I got it fixed.
Remove the following CSS rule and you can type happily in the input elements.
-webkit-user-select: none;
Phonegap just released 2.0. It has fixed the issue with the keyboard.
I must use my application with browser too and there is the same problem. It's possible fix this on textarea only:
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
}
textarea
{
-webkit-user-select: auto !important;
}
it works with jquery mobile too.
-webkit-user-select: none;
that did the trick for me. I was completely lost for couple of hours trying variations of input field parameters, nothing else worked. (phonegap 2.5.0 / android 4.1.1)