I am experimenting with the excellent Bootstrap DateTimePicker plugin but appear to have hit the buffers right at the start. The page control appears correctly but the calendar button is entirely unresponsive - no picker actually pops up. I have created this fiddle to illustrate the problem. Examining the console output for the fiddle does not reveal anything obviously wrong.
I noticed that the sample code uses jQuery 1.8.3 so I tried dropping back to that but to no avail. I suspect that I am getting something wrong here but I cannot quite figure out what that might be. I'd be most grateful for any help.
The test markup I am using is quite straightforward - and copied directly from the Datetimepicker example docs
<div class="form-group">
<label for="dtp_singleshot" class="col-md-2 control-label">Choose</label>
<div class="input-group date form_datetime col-md-5" data-link-
field="dtp_singleshot">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_singleshot" value="" /><br/>
</div>
First of all, you have to remove readonly attribute from your input. You don't need second hidden input. Then you have to assign id of dtp_singleshot to your input-group or input.
<div class="form-group">
<label for="dtp_singleshot" class="col-md-2 control-label" id="dtp_singleshot">Choose</label>
<div class="input-group date form_datetime col-md-5" data-link-
field="dtp_singleshot">
<input class="form-control" size="16" type="text" value="">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
JSFIDDLE
Related
I have a simple 1-page website using Bootstrap 3 (yes, I know BS3 is old, but that's ok for now). My site is hosted on Hostmonster. My domain is registered with Google Domains.
I've never built a contact form from scratch before, but I understand the general principles.
I copied the code from this Bootstrap example website.
Something is clearly missing, but I'm not sure what. I'm pretty sure it needs "form" tags, along with "action" and "post" elements.
Basically, nothing happens when I click the send button.
For additional information, I do have a Drupal website set up under this same domain. It has a Drupal contact form, which does work, so I don't believe this is a problem on the server side. But Drupal doesn't let me see the actual html under the hood.
Can some kind soul please review this code and help me get the form working? This is the code exactly as I copied it from the link above.
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail#something.com</p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
I'm looking for a solution that allows me to use bootstrap datetimepicker with more than one input field within an input-group.
<div class="form-group row">
<div class="col-md-12">
<div class="input-group multi-input-group datetimepicker">
<span class="input-group-addon"><i class="fas fa-calendar-alt fa-fw"></i></span>
<input type="text" class="form-control" name="formResidentRentStart">
<span class="input-group-addon"><i class="fas fa-calendar-alt fa-fw"></i></span>
<input type="text" class="form-control" name="formResidentRentEnd">
<span class="input-group-addon"><i class="fas fa-euro-sign fa-fw"></i></span>
<input type="text" class="form-control text-right" name="formResidentRentRentValue">
</div>
</div>
</div>
I'd like to use datetimepicker for the first 2 inputs separately (they are not linked) and for the last input field not at all.
Is there anyone who achieved this already?
Thank you!
Fiddle:
http://jsfiddle.net/0Lhq3w86/5/
You should use Linked Pickers.
See : https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers
I'm creating a prestashop 1.7.2.1 module. Prestashop comes with bootstrap 4 support.
I'm trying to use the from validation example from https://v4-alpha.getbootstrap.com/components/forms/#validation with the following code:
<div class="container">
<form>
<div class="form-group row has-success">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name#example.com">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-warning">
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name#example.com">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-danger">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name#example.com">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
</form>
</div>
using Pingendo 4 (bootstrap 4 desktop app editor) it works properly.
but when I add this code to my prestashop module all the inputs contains the validation icons repeated all through the input's width.
any ideas ?
PrestaShop's bootstrap CSS for these icons is being overriden by PrestaShop's own CSS.
When disabling the background property, it works fine.
You can modify the CSS and change background property to background-color.
I know this has been asked before but I the answers don't seem to work for me.
I am looking to decrease the size of my textbox and line it up beside a select and some text.
Here is my code.
<div class="controls">
<div class="btn-group">
<label class="btn btn-default">
<input type="checkbox" name="blah" value="true">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
<input class="form-control col-xs-1" placeholder="x" type="text" required="required">this should be beside the textbox. I also want the textbox to be small. One character small.
</label>
</div>
</div>
Also in bootply.
http://www.bootply.com/NePcbYQqfm
Thank you in advance!
Try this:
<div class="controls">
<div class="btn-group col-xs-4">
<label class="btn btn-default">
<input name="blah" value="true" type="checkbox">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
</label>
<input class="form-control input-sm" placeholder="x" required="required" type="text">this should be beside the textbox. I also want the textbox to be small. One character small.
</div>
</div>
It will work.
I am trying to create a search form, something like below..
http://tinypic.com/r/2py0scy/8
I am new to front end development and confused if an in-line form or a input group should be used?
The issue with inline forms is I am unable to size the input box (width) so any pointer there would also be really helpful.
Thanks!
Code Update
from home.HTML
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
from the layouts - application.html.erb
<div class="container">
<%= yield %>
</div>
To play with the width in Bootstrap, see the grid system and the use the columns:
For instance, if you want a form on the right and the width at the 50% of the container, you can do:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
This is div on the left
</div>
<div class="col-xs-12 col-md-6">
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
</div>
</div>
</div>
The previous code, is designed to change the behavior on small devices.
You can use both depending on what you're trying to accomplish. Bootstrap is well-documented, did you read their documentation regarding forms ? http://getbootstrap.com/css/#forms
By default input items are 100% width in bootstrap (e.g. they fill the containing element they are in). For instance:
<input type="text" class="form-control" placeholder="Text input">
would result in a 100% width input field and
<style>
.smallwidth {max-width: 200px;}
</style>
<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>
would result in a 200px width input field, because it is restricted by the outer div I put around it.