I have a bootstrap datetimepicker in my form. But when i select datetime, input box size keeps changing. After input it, i can't change the datetime with datetimepicker. I think, it's because datatble.min.js conflict with datetimepicker.js. But, but i still haven't solved it. Any help would be appreciated.
Before
Before add datetimepicker
Add
Add Date
Add Time
After
Input box size changed
Modal
<div id="modal_form" class="modal fade" role="dialog" aria-hidden="true" aria labelledby="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="formModalLabel"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" role="form" action="<?= base_url("catalog/insert") ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label">Start Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="start">
<span class=" input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">End Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="end">
<span class="input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Descirption</label>
<div class="col-md-9">
<textarea class="form-control" rows="3" name="desc" id="desc" val=""></textarea>
<span class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn grey-salsa btn-outline" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn green btn-primary" data-dismiss="modal" type="submit" id="btnsave">Save</button>
</div>
</div>
</div>
</div>
I suggest you use some special libraries which are made for this. https://www.daterangepicker.com/
https://flatlogic.com/blog/best-javascript-datepicker-libraries/
Related
I tried to make a modal form using bootstrap (horizontal form) and the field are shown under the labels. Any idea how can I fix it so the input text boxes will be at the right of the labels and not under them?
I've been trying all day to get it aligned with the boxes but to no avail. Pls help.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Update Staff</button>
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group">
<label for="name" class="col-sm-2 control-label" >Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email-Id</label>
<div class="col-sm-10">
<input id="email" class="form-control" type="email" placeholder="Enter Your Email-Id" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="form-group d-flex align-items-baseline">
you can add them to the form-group class.
Also, label and input have to be inline-block to come together. the form-control class in bootstrap makes the display block of the given element. also you can use this. here I just added the form-group row class :
<div class="form-group row"> // just added the row class
<label for="name" class="col-sm-2 control-label" >Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>
Try the following code. it will work for you. You haven't inserted the row class in order to get the two fields in the same line and you will need to you col-md classes in order to fit your message box in medium-size screens. You can use flex-box classes in order to center the text as bellow.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Update Staff</button>
<div
class="modal fade bd-example-modal-lg"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row">
<label
for="name"
class="col-sm-2 control-label d-flex align-items-center justify-content-center"
>Name</label
>
<div class="col-sm-10">
<input
id="name"
class="form-control"
type="text"
placeholder="Enter Your Full Name"
/>
</div>
</div>
<div class="form-group row">
<label
for="email"
class="col-sm-2 control-label d-flex align-items-center justify-content-center"
>Email-Id</label
>
<div class="col-sm-10">
<input
id="email"
class="form-control"
type="email"
placeholder="Enter Your Email-Id"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary mr-2"
data-dismiss="modal"
>
Close
</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>
I am trying to submit my modal title as post data, however it isn't being sent.
I have given the element a name attribute. Elements in the modal body are submitting as I would expect. Trying to submit the element whose name is "editModalTitle" below
HTML:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></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="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
Form data here
Edit 1: Added full html for modal.
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<!-- hidden value for modal title to post -->
<input type="hidden" id="Modal_title_to_post" name="Modal_title_to_post" value="eModalTitle">
<!-- hidden value for modal title to post -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
Updated code with hidden value for the modal title :)
Iam using this modal with bootstrap:
<div class="modal" id="contact-update-view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update contact</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="contact-create-name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" id="contact-create-name" name="contact-create-name" data-minlength="2" placeholder="Contact's Name" data-error="Name should atleast be 2 characters long" required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-create-phone" class="col-sm-4 control-label">Phone</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</div>
<input type="tel" class="form-control" id="contact-create-phone" name="contact-create-phone" placeholder="Phone Number" pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$" data-error="Enter a valid phone number" required/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-create-email" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input type="email" class="form-control" id="contact-create-email" name="contact-create-email" placeholder="Email" required data-error="The email is invalid"/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-success" data-toggle="tooltip" title="Yep! Two exclamations and a question mark,arent you excited?">Add contact!</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I use the bootcards-desktop.css from here,I find that the backdrop is displayed above the modal.When I click on the modal it is dismissed immediately.
I open the modal with this:
<button type="button" class="btn btn-default btn-edit" data-toggle="modal" data-target="#contact-update-view">
<span class="glyphicon glyphicon-pencil"></span>
</button>
I see this difference in the css:
.modal
z-index:1050;
position:fixed;
.modal-backdrop:
position:fixed;
z-index:1040;
When I click on the modal,it disappears(as if there was a backdrop on top of the modal),how can I get the modal to work correctly with bootcards?
It's not a Bootstrap 3.3.1 issues, nor a Bootcards issue. The problem is in the setup: the bootcards-desktop.min.css file (as well as the Android and iOS versions) is a concatenated version of Bootstrap (v3.2.0 at the moment) as well as the Bootcards CSS file. This is offered so you have one less HTTP request to make. In the dist folder of the Bootcards download, you'll also find versions of the CSS files without the built-in Bootstrap: they have a -lite suffix (and are a lot smaller...).
In your Plunkr, if I change the Bootstrap version to v3.3.1 AND change bootcards-desktop.min.css to bootcards-desktop-lite.min.css it all works again.
I'll release another version of Bootcards soon that will extend Bootstrap v3.3.1.
I have created a popup using bootstrap modal. Here is how it looks like
I want to make the input and input-group elements to be of same width and start at the same position like mentioned in this question. I have tried using form-group as mentioned in its answer but it doesn't work. I am new to bootstrap and JavaScript.
HTML code
<form class="form-horizontal">
<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">Enter Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="controls col-xs-9">
<input type="text" placeholder="Enter Name">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="controls col-xs-9">
<input type="text" placeholder="Enter Place">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="controls col-xs-9 input-group">
<span class="input-group-addon">$</span>
<input type="text" placeholder="0.00">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info" ></span>
</div>
</div>
</div> <!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
DEMO: https://jsbin.com/xewevu/1/
Form in wrong location, not using the correct classes on the input and you need to write custom css or use even more wrappers and the grid system, which is really overkill IMO.
The beauty of this approach is that if you decided to use .col-sm instead of xs, then the .help won't stack.
HTML:
<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">Enter Information</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<input type="text" class="form-control" placeholder="Enter Place">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="0.00">
</span>
</div>
</div>
</div>
</div>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
CSS
#apstMoleculeModal .form-group {
padding-right:20px;
position:relative;
}
#apstMoleculeModal .help {
position:absolute;
right:-8px;
top:12px;
}
You're not quite using the classes for col-*-* right, and your inputs are also missing classes. Take a look at this Bootply:
Bootply
Here to see what I mean.
Here's the code (Removed all Modals so I could directly edit it)
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="col-xs-2">
<input class="form-control input-sm" placeholder="Enter Name" type="text">
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="col-xs-2">
<input class="form-control input-sm" placeholder="Enter Place" type="text">
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon">$</span>
<input class="form-control input-sm" placeholder="0.00" type="text">
</div>
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
</form>
Please Note:
You may have to change the size of the col-xs-* to fit in the modal correctly.
I have got the following HTML code. I have no idea why the POST is sent with no parameters (I checked the parameters are not being sent with the firefox debugger):
<div class="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<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"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next...">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
</div>
I suspect the nested input fields may have something to do with it, but I need to have them nested to have proper formatting.
You need to assign a name to your input fields. For example:
<input type="text" class="form-control"
id="user_message" name="user_message" placeholder="In next..." />
Form data is posted as name/value pairs. If you don't provide name attributes, nothing will be posted.
As a side note, I would also recommend you to correctly close your input tags.
<div class="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<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"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next..." name="user_message">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date" name="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
Receive your data with $_POST['user_date'] and $_POST['user_message']