I am trying to implement a bootstrap modal form in my Django project. When I do this, everything works except the fields are running much wider than the modal window and seem strangely offset. I feel like there's an easy fix here but I can't determine exactly what I'm doing wrong. Here is my html for the modal form:
modal.html
<form method="post" action="">
{% csrf_token %}
<div class="modal-header">
<h5 class="modal-title">Create new Book</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{form.Reference_Number|as_crispy_field}}
{{form.Ultimate_Consignee|as_crispy_field}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="submit-btn btn btn-primary">Create</button>
</div>
</form>
Try placing each crispy form field inside a Bootstrap form-group <div> container. Like this:
<div class="modal-body">
<div class="form-group">
{{form.Reference_Number|as_crispy_field}}
</div>
<div class="form-group">
{{form.Ultimate_Consignee|as_crispy_field}}
</div>
</div>
More on info on Bootstrap forms here
Related
I'm trying to use JqueryUI autocomplete inside Bootstrap modal, but it doesn't work:
<!-- This one Works -->
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#citySelectionModal">
Launch demo modal
</button>
<!-- Modal (the autocomplete does not work here) -->
<div class="modal fade" id="citySelectionModal" tabindex="-1" role="dialog" aria-labelledby="citySelectionModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="citySelectionModalLabel">Select city</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</div>
Js code:
$(function() {
var locationList = ['London', 'Bilbao', 'Paris', 'Madrid', 'Moscow', 'Berlin'];
$("#locationSelector").autocomplete({
source: locationList
});
});
I recreated an example in jsfiddle: Link
After some research, I think it is related to the modal contents being hidden, but I don't know how to solve it. Any suggestion?
First of all you should edit you css and add your autocomplete higher z-index because bootstrap .modal class has z-index: 1050; so that you could even see the autocomplete any higher number than 1050 should do it
.ui-autocomplete {
z-index: 1060;
}
Secondly you can't use same IDs in the same page. One way to fix it would be to change
id -> class
Change your HTML input fields from id="locationSelector" to class="locationSelector" and change JS jQuery selector from $("#locationSelector") to $(".locationSelector").
I also provided a working example: https://jsfiddle.net/dh4e49z7/33/
your input field have same ids (locationSelector)
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
and
<div class="modal-body">
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
</div>
if same page has multiple same ids on different input fields it will not work.
Add CSS below:
.ui-autocomplete {
z-index: 4000 !important;
}
I have a small issue with a required field in a body of a bootstrap modal, ideally i want to validate the field before submitting but for some reason required is working , Can you please have a look
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="$dismiss()" >
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title"><b>Additional Information:</b> ( This info will be added to all incident selected )</h5>
</div>
<div class="modal-body">
<p>Additional Comments :</p>
<form name="modalForm">
<div class="form-group">
<textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="$close()" >Create</button>
</div>
</body>
Thanks
Change your submit button from type="button" to type="submit".
required attribute only works when there's a submit event listener.
Check out:
Form inputs in modal not showing as required
Try including the buttons inside the form tag:
<div class="modal-body">
<p>Additional Comments :</p>
<form name="modalForm">
<div class="form-group">
<textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<input type="submit" class="btn btn-primary" ng-click="$close()" ng-disabled="inputForm.$invalid" value="Create" />
</div>
</form>
</div>
Let me know if this helps
I want to align two elements. Is there a way to to this with help of bootstrap? It works if i float the elements and make the input element's width smaller. But that's not the solution i want to use. Is there a responsive, bootstrap way to do this?
Fiddle with the two elements i wanna align next to each-other (button and input).
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<button type="button" class="btn btn-default btn-sm adminButton">
<span class="table-add glyphicon glyphicon-plus"></span> Add columns
</button>
<input class="form-control input-sm" id="inputsm" type="text">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
add modal-body & row & col- class
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-3">
<button type="button" class="btn btn-default btn-sm adminButton"><span class="table-add glyphicon glyphicon-plus"></span> Add columns</button>
</div>
<div class="col-sm-8">
<input class="form-control input-sm" id="inputsm" type="text">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
https://jsfiddle.net/e0cr1nL2/107/
Try bootstrap addon
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
Just try this css:
#inputsm{
display: inline;
width: 50%;
}
You can provide the width of input as you want..
FIDDLE
I have an html form. For the image file input, I have a modal that pops up to set the input field but also allow the user to crop. When I submit the form, it says the input field is empty.
Here is the form with modal embedded:
<form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h5>First Name</h5>
<div class="form-group">
{{ form.first_name|attr:"class:form-control"|attr:"placeholder:Enter Your First Name" }}
</div>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<button data-toggle="tk-modal-demo" data-modal-options="slide-down" class="btn btn-primary">Upload</button>
</div>
{{ form.crop_coords }}
<!-- Create the modal dynamically via Handlebars -->
<script id="tk-modal-demo" type="text/x-handlebars-template">
<div class="modal fade" >
<div class="modal-dialog">
<div class="v-cell">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Upload Profile Image</h4>
</div>
<div class="modal-body container">
<div class="max-width: 560px;">
<div>
<img style="max-width: 100%;" id="tempImg" src="{% static 'app/images/default-team-large.jpg' %}"/>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<input id="id_profile_image2" type="file" name="pic" accept="image/*">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</div>
</script>
<div class="form-group margin-none">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-sm btn-primary" href="nml-home.html"> Confirm User Changes<i class="fa fa-fw fa-arrow-right"></i></button>
</div>
</div>
</form>
To test, I click the data-toggle button to popup the modal. It then opens the tk-modal-demo which has a file upload. I upload an image and then I click the save button in tk-modal-demo to dismiss the modal. Then I submit the form with the bottom form submit button. My validator says that the field is empty.
How can I set this required form field from the modal and have it populated when I submit?
It might be that the modal input elements are not created inside the <form> element. Input elements outside of this container will not be sent to the server upon submit.
You can first check out what is actually transmitted with the development console of your browser (in Chrome it's the Network tab). If your fields aren't there, then you might need to write a bit of Javascript, to either:
copy the contents of the input elements inside the modal to hidden fields within the form, for using the regular submission process
or, hijack the submit event and manually compose which fields you want to send
I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>