why is my placeholder text not appearing for ie 11? This is the only ie I am using. It works fine on chrome and firefox.
<div class="leftform">
<form action="" method="get">
<input type="checkbox" name="EmailCheck" value="Email" class="checkboxSize">Email<br/>
<input type="text" name="EmailAddress" placeholder="Enter email address" class="textBox" size="35"><br>
<input type="text" name="ConfirmEmail" placeholder="Confirm email address" class="textBox2" size="35"><br>
</form>
</div>
IE11 hides the placeholder text when the input is in focus, which probably explains the confusion here (I just ran into this with an input we auto-focus).
Related
I have used angular material to make login form. The text input field works properly, but the password field doesn't render properly in Internet Explorer 11.
Screenshot:
enter image description here
Here is the code:
<mat-form-field class="feild-full-width" color="primary">
<input matInput type="text" placeholder="Username"
autocomplete="off" />
</mat-form-field>
<mat-form-field class="feild-full-width" color="primary">
<input matInput placeholder="Password" autocomplete="off" [type]="texttype ? 'password' : 'text'" />
<mat-icon matSuffix (click)="texttype = !texttype">{{texttype ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
How to fix it?
I have a simple form that uses Google ReCaptcha v2 to verify. Its working fine on desktop/ipad and iphone on all browsers I have tested so far. The problem I have discovered is that when I click "I'm not a robot" on the smaller iphone screen in portrait mode - the images attempt to display below the form - and as the form is at the bottom of the page - it ends up cutting off like this:
<div class="col-md-6">
<p><b>CONTACT FORM</b>
</p>
<form role="form" id="form" action="form.php" method="post">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
<span class="help-block" style="display: none;">Please enter your name.</span>
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
<label for="message">Message</label>
<textarea class="form-control" rows="7" id="message" name="message" placeholder="Enter message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<div class="g-recaptcha" data-theme="dark" data-sitekey="INSERT DATA SITE KEY HERE"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
</div>
<button type="submit" id="Submit" data-loading-text="Sending..." class="btn btn-default">Send Message</button>
</form>
</div>
When I rotate iPhone to landscape - it then displays the images above the reCaptcha widget which is good. But rotate back to portrait it tries to display the pictures below the widget - and cuts off anything below the end of page - and inserts a big white space. Any ideas what I can do to resolve?
The other two answers on this question propose overriding
div.ui-input-text {}
However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project.
How can I modify a single text input?
A class designation in the input tag doesn't work. If I encapsulate the input with a div tag it still doesn't work. I'm trying to put an icon at the end but it seems all Jquery mobile text input takes the entire screen.
<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
CSS, No Effect!
.address {
width: 200px !important;
}
Now, I could still switch to Bootstrap if that's the better way to go on this project. It seems to have .col-xs-* classes that solve this problem.
Thanks in advance.
Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.
<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
Working DEMO
It is maybe bit late to answer this, but maybe for others looking for the same thing (I was :-)
You can put your address in a div:
<div class="myContainer">
<label id="lbAddress">Provide the address</label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
Then select your container and just the input inside that container in the CSS:
.myContainer > .ui-input-text
{
width:200px;
}
demo: https://jsfiddle.net/petitbarzun/cfazq5k5/
Reading your comments on the answer from ezanker, if you want all the inputs to appear on one line, there needs to be a container with ui-field-contain like this (the label should be there too):
<div class="ui-field-contain">
<label id="lbAddress" style="display:none"></label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
The CSS then looks like this:
.ui-field-contain > #lbAddress~[class*=ui-input-text]
{
width:219px;
}
demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/
Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/
Jquery Mobile nicely lays out controls in a grid. I would the text "12345678" outlined in red in the image below to sit right above the textbox and left aligned. I can't see how to do it.
The image was generated with this jsfiddle: http://jsfiddle.net/958Gr/3/
By setting disabled='true' and value="12345678" you can get something decent. The account number will still show as as field, but then you can theme it differently. See this fiddle:
http://jsfiddle.net/den232/7hmYn/
Good Luck!
<div class="ui-body ui-body-b">
<div data-role="fieldcontain" data-theme='c'>
<label for="Phone" >Account ID</label>
<input id="Phone" name="Phone" type="text" disabled='true' value="12345678" />
</div></div>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
<div class="ui-bar ui-bar-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
You may Use Two-column grids as in this updated jsfiddle:link