Develop Reference

input field is not eeditable in mobile view

I have made a simple form , you can check it on http://bspldev.review/phpmailer/ , using bootsrap its working fine on desktop but on mobile input field for name and email is not editable, that we can not write anything , only mobile field is working in mobile view, here is simple form code, i have give proper links for bootstrap and jquery library in header, here i will give excerpt of form only,
<form method="POST" name='' id="woohooEmail" action="">
<div class="form-group">
<label class="sr-only" for="fullname">Name</label>
<input type="text" class="form-control" placeholder="name" name="LastName">
</div>
<div class="form-group">
<label class="sr-only" for="mobile">Mobile</label>
<div class="input-group">
<div class="input-group-addon">
+91
</div>
<input type="text" class="form-control" placeholder="mobile" name="Mobile">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="area">Email</label>
<input type="email" class="form-control" placeholder="email" name="Email">
</div>
<div class="pad">
<button type="submit" name="submit" id="submit" value="" class="btn btn-default btn-text ">
Schedule
</button>
<i class="fa fa-circle-o-notch fa-spin" id="icon-load" style="font-size:24px; color:red; display:none"></i>
</div>
<form>
Please check this on mobile and kindly suggest me some solutions

In your mobile image is coming above the form, So increase your z-index of form's parent div or decrease z-index of your image in mobile screen using media query. You haven't add the div in above code so i just add z-index on form.Like :-
#media screen and (max-width: 768px) {
#woohooEmail{
z-index:9999;
}
or here you just can simply add z-index without media query too. it will work for every device

Build the form using boostrap's grid system. you can use one row spanning all the 12 columns and use the col-sm attribute

Controlling the datepicker calendar margin off of the date field with JQuery

I'm working with the Bootstrap Datepicker Plugin and I noticed the datepicker calendar' arrow for the dropdown overlaps the date field by at least 3 pixels. See image below. I thought of giving the main calendar container ( the dropdown that contains the calendar and the arrow by css pseudoclass ::after) a margin-top:5px; But no cigar. Basically because the javascript overwrites it. I looked for any fallback options in the documentation and nothing of the like. So I am assuming I am going to need a custom jQuery to manipulate the calendar in the DOM and correct the top:##px by -+5px depending on whether is opening top or bottom.
EDIT
I also tried overwriting the top:##px; and giving it an extra 5px and an !important so that it actually overwrite it, but the problem with that is that the top positioning must be handled at the DOM according to the position of the datepicker field control otherwise, all datepickers will show in the same spot.
This image shows the output
The Bootstrap DatePicker Documentation can be found here
And the code I have in looks like this:
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
Very simple.
Here is an image of the inspector and you can see the postion top value added by the JS.
Any idea on how to bring that sucka down?
Here is a CODEPEN with my problem

You are initializing datepicker over <div class="input-group date" id="datepicker" element not over input element.
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
<!-- _______________^^ Remove class `date` from here -->
<input type="text" class="form-control date">
<!-- ____________________^^ Add class `date`here -->
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
Fiddle here

while entering value into text box, it automatically taking full date default angular js

I am using input type="text" for entering date in my site for angular JS, while entering the text box, it is taking default value is 01/01/2001
below code I am using :
<p ng-controller="DatePickerController" class="input-group">
<input type="text" class="form-control" name="effectiveDate" ng-model="fieldValue" is-open="opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
{{fieldValue}} 01/01/2001
could you please help me out any one, Thanks in advance

You can use the date type in HTML5, then no need to do anything in AngularJS.
<input type="date" etc...
The FormController will only be $valid if a valid date is provided. You can make this necessary by Just adding a required attribute.
More info

bootstrap-datetimepicker: layout issues with input textbox and icon

I'm using the bootstrap-datetimepicker in a form with a radio button, and I'm having a lot of issues with it. The first problem is that only the old version of it is working for me, not the current one, but that's okay (though I'd like to know why). The bigger problem is that the layout is messed up: the little square with the calendar icon is bigger that the input textbox, like this:
I have several forms like this, and in some of them, the layout recovers when I replace the "name" attribute of the textbox with "id." That doesn't work for all forms though, and if I understand it correctly, I shouldn't use "id" with forms anyway. Taking it out completely also helps sometimes, but I need it to get the input for my form.
I created a JSFiddle with my code, but it doesn't seem to work properly. Eonasdan's sample JSFiddle is slightly different from mine.
Here's my HTML code:
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<div class="radio">
<div class="textlikelabel">Question? *</div>
<label><input value="answer1" type="radio" name="answers" required="required">Answer 1</label>
</div>
<div class="radio">
<label><input value="answer2" type="radio" name="answers" required="required">Answer 2</label>
</div>
<div class="radio">
<label><input value="answer3" type="radio" name="answers" required="required"/>Specific date:
<div class="input-group date" id="datetimepicker2"> <input type='text' class="form-control" name="answer3text"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</label>
</div>
</div>
</div>
And here's the JavaScript:
$('#datetimepicker2').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
} });
Any idea what I'm doing wrong?? I'd appreciate your help!

You should avoid nesting the input-group inside of a label as well as the parent radio div. It is inheriting the undesired styling as a result.
<div class="radio">
<label><input value="answer3" type="radio" name="answers" required="required" />Specific date:</label>
</div>
<div class="input-group date" id="datetimepicker2">
<input type='text' class="form-control" name="answer3text" />
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
Your JS fiddle also had a broken link to the font awesome css file
See: http://jsfiddle.net/spasticdonkey/1o3b3b1o/2/
Note you should be using the latest version of the datetimepicker script, no reason the older script should be working better for you.

Get bootstrap radio button text - jquery

I'm using bootstrap and I find it confusing when trying to extract the label name. How do I get the selected label text? (e.g. Furniture or Fruits)
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval1" /></span>
<input class="form-control" value="Furniture" disabled>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval2" /></span>
<input class="form-control" value="Fruits" disabled>
</div>
I tried these but did not give the label text:
alert($( $(":radio[name=radioGroup]:checked").prop("labels") ).text());
alert($('input[name="radioGroup"]:checked').text());
alert($('input[name="radioGroup"]:checked + label').text());

In your scenario you just need to get the value of selected radio button.
For your better understanding have a lookto this JS Fiddle link
You can use the selected DOM element as::
alert($("input[name='radioGroup']:checked").closest(".input-group").find(".form-control").val())

Try using .val() then follow the tree from the checkbox up to its containing div and back down to the value in the associated input.
alert($("input[name=radioGroup]:checked").parent(".input-group-addon").parent(".input-group").children("input.form-control").val());

You can try this...
$('input[name="radioGroup"]:checked').parents('.input-group').find('.form-control').val()
OR
$('input[name="radioGroup"]:checked').parent().next().val()