how to resolve FireFox browser print issue- large gaps and missing content - javascript

I have a webpage that contains a div that users can print using a print button that has an onclick javascript function. The div contains a couple of paragrapghs with bootstrap classes.The div also contains 3 bootstrap wells with bootstrap forms within them.
When I view the print preview, page 1 shows the first paragraph that is within the div, then no other content. The print preview shows more of the content being on page 2 and on page 3. However, it is cutting off some of the content at the end of the div.
I have spent several hours researching this issue and have tried several solutions, most of which try to modify overflow and float properties. None of these have resolved my problem.
I do have one css print rule that hides the print button when printing. I have disabled this css rule, but that has made no difference. I also have 1 page-break-before-always, which I have commented out, but this makes no difference.
These issues do not exist when using chrome.
My FireFox browser version is 52.0.2 (32-bit).
My Chrome browser is version 49.0.2.2623.112m.
My OS is windows XP.
p.s. keep in mind I am a pretty inexperienced developer.
<div class="row" id="sign_up">
<p class="lead text-danger text-center">Please sign me up for the 7 day Carnival Cruise.
<br>
Please print and fill out this sign-up form for each person.
</p>
<br>
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary center-block"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
<form class="well form-horizontal" action="" method="post" id="sign-up_form">
<fieldset>
<!-- Form Name -->
<legend>Sign-Up Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">First Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group inline">
<label class="col-md-2 control-label" >Last Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Date input-->
<div class="form-group">
<label class="col-md-2 control-label" >Date of Birth:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input name="date" placeholder="MM/DD/YYY" class="form-control" type="date">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">E-Mail:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="" class="form-control" type="email">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Address:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">City:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label">State:</label>
<div class="col-md-6 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="state" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Zip Code:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="emerg_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="emerg_phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
</fieldset>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Inside Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Balcony Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Yes.<br> I do want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">No. <br>I don't want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<p class="no-indent text-danger">I understand the payment / cancellation policy as stated above:
<br>
(sign) ________________________________________
</p>
<p><mark>Please bring or mail this completed form with payment.</mark></p>
<br>
<p style="page-break-before: always">
<p>
If you have any questions, please call Michelle # (810)-686-3524 or Denise # (989)-876-6102.
<br>
1390 E. Willard Rd.
<br>
Clio, MI 48420
<br>
810 - 686 - 3524
<br>
www.milesawaytravel.net
<br>
e-mail: <span class="text-primary">3524#Hughes.net</span>
<img class="responsive center-block" src="http://res.cloudinary.com/dx1tairmq/image/upload/v1499127232/miles%20away%20travel/newmatlogo.png" alt="miles away logo">
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
</p>
</div>

Related

Change localstorage on form submit from 0 to 1

So I have the following form here
{{> header}}
<div class="container">
<form action="/dashboard/users/forms/competition-form/{{user.id}}" method="post" class="competitionformlockdown">
<h2>School Competition Form</h2>
<p>
<b>All fields with <span style="color: red">*</span> are required</b>
</p>
<div class="panel panel-default">
<div class="panel-heading">
General Information
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="schoolName">
School Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" name="schoolName" placeholder="Enter school name" value="{{competitions.schoolName}}" required>
</div>
<div class="form-group col-md-6 date" data-provide="datepicker">
<label for="competitionDate">
Competition Date <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionDate" name="competitionDate" placeholder="Enter the date of competition" value="{{competitions.competitionDate}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTime">
Time <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTime" name="competitionTime" placeholder="Enter the time of the competition (e.g. 8:00 AM)" value="{{competitions.competitionTime}}" required>
</div>
<div class="form-group col-md-12">
<label for="competitionVenue">
Venue <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionVenue" name="competitionVenue" placeholder="Enter where the competition was held" value="{{competitions.competitionVenue}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalOfStudents">
Total number of students in the program <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalOfStudents" name="competitionTotalOfStudents" placeholder="Enter the total number" value="{{competitions.competitionTotalOfStudents}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalParticipated">
Total number of students that participated <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalParticipated" name="competitionTotalParticipated" placeholder="Enter the total number" value="{{competitions.competitionTotalParticipated}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalPersonnel">
Total number of school personnel involved in the program <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalPersonnel" name="competitionTotalPersonnel" placeholder="Enter the total number" value="{{competitions.competitionTotalPersonnel}}" required>
</div>
</div><!-- row ends -->
</div><!-- End of panel body -->
</div><!-- School Information panel ends -->
<!-- Judge 1 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 1
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge1Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge1Name" name="competitionJudge1Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge1Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge1Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge1Telephone" name="competitionJudge1Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge1Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge1Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge1Email" name="competitionJudge1Email" placeholder="judge#example.com" value="{{competitions.competitionJudge1Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- Judge 2 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 2
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge2Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge2Name" name="competitionJudge2Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge2Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge2Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge2Telephone" name="competitionJudge2Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge2Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge2Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge2Email" name="competitionJudge2Email" placeholder="judge#example.com" value="{{competitions.competitionJudge2Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- Judge 3 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 3
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge3Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge3Name" name="competitionJudge3Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge3Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge3Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge3Telephone" name="competitionJudge3Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge3Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge3Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge3Email" name="competitionJudge3Email" placeholder="judge#example.com" value="{{competitions.competitionJudge3Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- The following fields are hidden to users and should ONLY be visible and editable by a site admin-level user. -->
{{#if user.admin}}
<div class="panel panel-danger">
<div class="panel-heading">
Administrators Only
</div>
<div class="panel-body">
<p>Sent Required Photos? (currently {{competitions.competitionRequiredPhotos}})</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredPhotos" id="yesPhotosRadio" value="yes">
<label class="form-check-label" for="yesPhotosRadio">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredPhotos" id="noPhotosRadio" value="no">
<label class="form-check-label" for="noPhotosRadio">No</label>
</div>
<p>Sent Required Certifications? (currently {{competitions.competitionRequiredCertifications}})</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredCertifications" id="yesCertsRadio" value="yes">
<label class="form-check-label" for="yesCertsRadio">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredCertifications" id="noCertsRadio" value="no">
<label class="form-check-label" for="noCertsRadio">No</label>
</div>
</div>
</div>
{{/if}}
<!-- End of fields hidden to user -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{{> footer}}
and my current JS code
localStorage.setItem('competitionformlockdown', '0' || '1');
if(localStorage.getItem('competitionformlockdown') == '1') {
$(".competitionformlockdown input").prop('disabled', true);
$(".competitionformlockdown input[type=submit]").prop('disabled', true)
}
I want the forms to load with the value of 0 then when the form is submitted the value switches to 1 and triggers the competitionformlockdown on load and persists.
The forms are loading as 0 but the value is not switching to 1 on submit.
I'm new to localstorage so this is all new to me.
Any help is appreciated.
you can add a script tag which sets the value to zero on form load, and then after the submit you can return the script tag to set to 1.
Form load
<script>
var currentvalue = localStorage.getItem('competitionformlockdown') || '0';
localStorage.setItem('competitionformlockdown', currentValue);
</script>
On submit
localStorage.setItem('competitionformlockdown', '1');
Working fiddle

Javascript how to receive dates from a plain text into a formulary

I need help with this code..
I need to get date in those inputs from an external plain text to fill the fields..
I have read in many forums but I have no clue how to do that... if someone of you guys could help would be helpfull!
Thanks in advance..
Here's What I have:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaz:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Direccion IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mascara Subred : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Guardar" class="btn btn-success btn-sm" onclick=" this.form.action ='/ibisaserver/' " title="Guardar"><i class="fa fa-save"></i> Guardar</button>
<button type="submit" name="Probar" class="btn btn-success btn-sm" onclick=" this.form.action ='/probarconexion' " title="Probar Conexión"><i class="fa fa-check"></i> Probar Conexión</button>
</div>
</form>
</div>
</div>
All I need to create an external plain text and the information there should appears on those fields.
Sorry for my bad english.
First: you have to load the text file using xmlHttp (if available on client system elsewhere you may use FileReader):
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', 'yourfile.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
second: if you have wrote data in different lines, split it to an array:
var myarray = mytext.split("\n");
and finally use the array to fill the form fields.

How can I read/write from a plain text in JavaScript

I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.

Parsleyjs 2 and Bootstrap 3 input text field with addon obscuring on errors

I am currently trying to implement Parsleyjs 2.2 to work nicely with Bootstrap 3.3. But I am experiencing some problems with getting the errors displayed beneath the text-field with an addon (input-group-addon).
I have tricked a bit with the HTML/CSS to get the kind of responsive behaviour that I wanted, but here is the underlying HTML/JS:
$('.signupForm').parsley({
successClass: 'has-success',
errorClass: 'has-error',
classHandler: function(el) {
return el.$element.closest(".form-group");
},
errorsWrapper: '<span class="help-block"></span>',
errorTemplate: "<span></span>"
});
<form class="signupForm" method="post" accept-charset="utf-8" action="" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="subdomainInput">Subdomain</label>
<div class="input-group">
<span class="input-group-addon" id="subddomainAddon">https://</span>
<input type="text" class="form-control input-lg" id="subdomainInput" required="">
<span class="input-group-addon" id="subddomainAddon">.domain.com</span>
<!-- <span class="help-block">Errors appears here</span> -->
</div>
<!-- <span class="help-block">Errors should be here</span> -->
</div>
<div class="container-fluid">
<div class="row">
<span class="form-group">
<div class="col-sm-1">
<label for="nameInput" class="inlineLabel">Name</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="nameInput" placeholder="John Doe" required="">
</div>
</span>
<div class="form-group">
<div class="col-sm-1">
<label for="emailInput" class="inlineLabel">Email</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="emailInput" placeholder="john#example.com" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br/>
<button type="submit" class="btn btn-danger">Register</button>
</div>
</div>
</div>
You were soo close! You need to set the errors container to the .form-group as well.
errorsContainer: function(el) {
return el.$element.closest('.form-group');
},

Angular UI Bootstrap Input-Group-Button - darn floating button

I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon
There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>

Categories