I am new to bootStrap and Html. I am currently using the Bootstrap 3 Datepicker and I have a problem. The glyphicon-calendar icon is separated away from the input textbox. How do I fix this? Here is the screenshot of my problem and my codes. In addition, if you manage to solve my problem, can you provide an explanation on how you solve it? I would like to learn more.
Screenshot of my problem
$(function () {
$('#datepicker1').datepicker();
});
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
it is proper code just add this bootstrap js and css see the output
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to add a date time picker to an input in a modal, but for some reason, I can't, when I make click in the input it doesn't display, I don't have an idea why but I need it for a better UX/UI in the modal, something that I try was change the id to the divs but it didn't work.
I'm leaving my code.
Modal
<!-- Modal newevent-->
<div class="container">
<div class="modal fade " id="newevent">
<div class="modal-dialog modal-lg mw-80 ">
<div class="modal-content border-0 rounded">
<div class="modal-body mr-4 ml-4 pr-2 pl-2">
<form action="./plugins/login/php/completedetails" class="" method="POST">
<div class="form-group ">
<input maxlength="30" class="form-control-plaintext" type="text" name="name" placeholder="Nueva Tarea" id="name" />
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-user mr-3 text-primary"></i>Responsable</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stream mr-3 text-primary"></i>Estado</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"><i class="fas fa-calendar-day mr-3 text-primary"></i>Fecha de entrega</label>
<div class="col-sm-8 input-group">
<input type="text" id="datetimepicker-default" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stopwatch mr-3 text-primary"></i>Tiempo estimado</label>
<div class="input-group mb-3 col-sm-8">
<input type="number" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">h</span>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label for="inputPassword4">Descripción</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Añade detalles"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
Scripts and stylesheets
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- ELemeentos añadidos para el datepicker -->
<!-- jquery JS -->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Bootstrap js -->
<script
type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
></script>
<!-- Propeller textfield js -->
<script type="text/javascript" src="dist/js/propeller.min.js"></script>
<!-- Datepicker moment with locales -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/moment-with-locales.js"
></script>
<!-- Propeller Bootstrap datetimepicker -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/bootstrap-datetimepicker.js"
></script>
<script>
// Default date and time picker
$("#datetimepicker-default").datetimepicker();
</script>
I think datetimepicker init success before html render
check state html create after script
try $(document).ready(function(){$("#datetimepicker-default").datetimepicker();
});
How to use class fo Eonasdan datetimepicker instead of using ID to enable the picker. And try to enable all having the same class use Eonasdan datetimepicker.
JSFIDDLE : https://jsfiddle.net/aice09/cdaw62jz/
$(function() {
$('#enablepicker').datetimepicker();
});
<!--JQUERY-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date enablepicker' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Datetimepicker 1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date enablepicker' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="Datetimepicker 2" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.
Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
LOGIN</i>
<div class="dropdown-menu">
<section id="signin_alt" class="authenty signin-alt">
<div class="section-content">
<div class="wrap">
<div class="container">
<div class="row" data-animation="fadeInUp">
<div class="col-md-4 col-md-offset-1">
<div class="normal-signin">
<div class="title">
<h2>Sign In</h2>
</div>
<div class="form-main">
<div class="form-group">
<div class="un-wrap">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="pw-wrap">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="row">
<div class="col-md-6">
<input type="checkbox" class="form-control" checked>
<label>Remember me</label>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-4 col-md-offset-8">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 hidden-xs">
<div class="horizontal-divider"></div>
</div>
<div class="col-md-4">
<div class="sns-signin">
<i class="fa fa-facebook"></i><span>Sign in with Facebook</span>
<i class="fa fa-google-plus"></i><span>Sign in with Google+</span>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row top-buffer bottom-wrap">
<div class="col-xs-6 col-md-2 col-md-offset-1">
Forgot your password?
</div>
<div class="col-xs-6 col-md-2">
Create an account
</div>
</div>
</div>
</div>
</div>
</section>
</div>
All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?
Thanks!
You can do that by using a click event on the element you want and then stopping the Propagation inside the click event.
For Example:-
$("#some_id").click(function(e){
e.stopPropagation();
});
The Div, in which you have your form having following code which may closing your div. Also all of this code should be in li tag followed by ul wnder which you should keep your form.
<div class="row" data-animation="fadeInUp">
The input-group-btn for the targetDate element stays pinned to the right hand side of the input group irrespective of screen width until I add in the autogenerated CSS that comes with the hottowel generator.
I need some assistance in working out what aspect of CSS is affecting the behaviour.
Check out this jsfiddle
Tried all 3 sizes of grid layout to no avail but i dont think that is the issue.
<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 id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<div class="row">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
<span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="description" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
<span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="category" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.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> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="assignee" class="col-lg-2 control-label">Assignee</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.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> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="targetDate" class="col-lg-2 control-label">Target Date</label>
<div class="col-lg-8">
<!-- <div class="col-lg-4"> -->
<div class="input-group">
<input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.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">
</input>
<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-lg-4 -->
</div> <!--/col-lg-8 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div> <!--/col-lg-2 -->
</div>
</div>
<div>
<tt>name = {{vm.submitjobform.name}}</tt><br/>
<tt>desc = {{vm.submitjobform.description}}</tt><br/>
<tt>category = {{vm.submitjobform.category.name}}</tt><br/>
<tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
<tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
</div>
</form>
</div> <!-- content-user div -->
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div> <!-- widget violet -->
</div> <!-- row div -->
</div> <!-- container div -->
</section>
</section>
Thanks
Simon
http://jsfiddle.net/voykuL65/
I assume you're using bootstrap as you import it in your css on your fiddle.
The main issue is you aren't including bootstrap JS as well. If you delete your CSS in your fiddle and switch the framekwors & extensions to jquery 2.1 and select Bootstrap 3.2 your code looks fine.
Another point to remember is always design bootstrap smallest up.
You've got everything
class="col-lg-2"
You might have just been tinkering, but remember to start with xs/sm and move larger.
There is also a stray </input> Kill him as well.
I want to have a form for each tab, but the form fields are completely misaligned:
http://jsfiddle.net/r2guf086/
As far as I can tell, I'm following Bootstrap's example code quite closely. What is wrong here?
My code:
<h2 id="ingredients"><strong>Ingredients</strong></h2>
<hr />
<div class="row">
<!-- Nav tabs -->
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">#1</li>
<li>#2</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ingredients-1">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">xxx</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane" id="ingredients-2">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">yyy</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
First one has the following CSS link:
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
Second one has this CSS:
<link class="cssdeck" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I would not mix and match CDNs for the same library, and only use those which you trust. Change the CSS in the second example to this and it will work
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
Before: http://jsfiddle.net/awkbmn0L/
After: http://jsfiddle.net/1eznowf7/
(I've never heard of liveweave, and it was doing some weird display things to the code, so I went with jsfiddle for examples)