just like the title says: Bootstrap's checkbox cannot be aligned Horizontally or Vertically when next to an input.
Problem Rendering:
I have tried the following with no good results that code Snippet.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container mt-5">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3">
</div>
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Ex
</label>
</div>
</div>
</div>
</form>
</div>
If you add the class "align-items-center" to your form-group the checkbox will be aligned vertically.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container mt-5">
<form>
<div class="form-group row align-items-center">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3">
</div>
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-4">
<div class="form-check orm-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
</form>
</div>
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 working on a webpage based on a template downloaded from the internet. This page contains several includes and I do not know enough to change.
My problem is that I am implementing a Flot chart and the error "Uncaught TypeError: $.plot is not a function" always occour.
I've implemented the same chart on a sample page and it works with four includes: jquery-2.2.3.min.js, /jquery.flot.min.js, jquery.flot.time.js, and utilitarios.js (my authorship )
I'm think that the problem may be in some include that is in the template and is in some type of conflict.
Line of erro:
$.plot("#line-chart", [line_data1, line_data2],
My Html source page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Painel Predial</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/AdminLTE.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/skins/_all-skins.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/flat/blue.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/morris/morris.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/datepicker/datepicker3.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/all.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/timepicker/bootstrap-timepicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- some informations -->
</header>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<style>
.esconde{
display:none;
}
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content">
<!-- Área do form -->
<form id="formDashboard">
<div class="row esconde" id="boxForm">
<div class="col-md-10">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Informe os critérios para geração do gráfico</h3>
</div>
<div class="box-body">
<!--Seleção de unidades -->
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>Informe a macrolocalidade</label>
<select id="macroLocalidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a localidade</label>
<select id="localidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a unidade</label>
<select id="unidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label>Informe o período desejado</label>
<select id="periodo" class="form-control">
<option value="0">Registro Diário</option>
<option value="1">Media por Hora</option>
<option value="7">7 dias</option>
<option value="15">15 dias</option>
<option value="30">30 dias</option>
<option value="45">45 dias</option>
<option value="60">60 dias</option>
</select>
</div>
</div>
<div class="col-xs-4" id='boxDataDia'>
<div class="form-group">
<label>Informe a data que deseja consultar</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="diaPesquisa" name="data_hora_inicio">
</div>
</div>
</div>
<!--
<div class="col-xs-5">
<div class="form-group">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker2" name="data_hora_fim">
</div>
</div>
</div> -->
</div>
</div>
<div class="box-footer">
<input type="hidden" value="5a5D0Rl5Vl57U4pesspDGe0lIhzTsXwNflDzidMb" name="_token">
<input type="button" onclick='processar()' class="btn btn-primary active" value="Gerar Relatório" />
<input type="reset" class="btn btn-default" value="Limpar" />
</div>
</div>
</div>
</div>
</form>
<!-- Área do Gráfico -->
<div class="row">
<div class="col-md-8">
<!-- Área de mensagem de erro -->
<div class="box box-danger box-solid esconde" id="boxError">
<div class="box-header with-border">
<h3 class="box-title">Erro</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" id="boxErrorMessage">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!--Área de mensagem -->
<div class="box box-primary box-solid esconde" id="boxAguarde">
<div class="box-header">
<h3 class="box-title">Carregando....</h3>
</div>
<div class="box-body">
Aguarde enquanto o gráfico é gerado
</div>
<!-- /.box-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- end loading -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 text-center esconde" id="boxPainelSituacaoAtualHidrico">
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoSensor1"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor1"></div>
</div>
</div>
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoaSensor2"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- AREA CHART -->
<div class="box box-primary esconde" id="boxGraficoHidrico">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Nivel de Reservatórios</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart" id="areaChartContainer">
<canvas id="areaChart" style="height:310px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<!-- Gráficos de temperatura -->
<div class="row">
<div class="col-md-2 text-center" id="boxPainelSituacaoAtualTemperatura">
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor1"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor1"></div>
</div>
</div>
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor2"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- FLOT CHART -->
<div class="box box-danger esconde" id="boxGraficoTemperatura">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Temperatura das Bombas</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="line-chart" style="height: 300px;"></div>
</div>
<!-- /.box-body-->
</div>
</div>
</div>
<div id="saida"></div>
</section>
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
<!-- Utilitários -->
<script src="http://localhost/sistema/public/js/utilitarios.js"></script>
<script src="http://localhost/sistema/public/js/graph/graficos.js"></script>
<script>
/**
Load da Página
*/
$(function () {
$('#diaPesquisa').datepicker({
dateFormat: "dd/mm/yyyy" ,
language: "pt-BR",
autoclose:true
});
$.get('/sistema/public/dashload', function(dataLoad){
var hasError = showLoadError(dataLoad);
if(!hasError)
showFormOptions(dataLoad);
});
});
</script>
<!-- page script -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Versão</b> 1.0.4
</div>
<strong>Copyright © 2017 <a href="http://www.sensoragroup.com.br" target='_blank'>Sensora Group</a>.</strong> Todos os direitos reservados
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora#example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<i class="fa fa-trash-o"></i>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6
<script src="bootstrap/js/bootstrap.min.js"></script> -->
<script src="http://localhost/sistema/public/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<!-- <script src="plugins/morris/morris.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/morris/morris.min.js"></script>
<!-- Sparkline
<script src="plugins/sparkline/jquery.sparkline.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<!-- <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart
<script src="plugins/knob/jquery.knob.js"></script> -->
<script src="http://localhost/sistema/public/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<!-- <script src="plugins/daterangepicker/daterangepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap datepicker -->
<!-- Bootstrap WYSIHTML5
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick
<script src="plugins/fastclick/fastclick.js"></script> -->
<script src="http://localhost/sistema/public/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App
<script src="dist/js/app.min.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="dist/js/pages/dashboard.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes
<script src="dist/js/demo.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/demo.js"></script>
<!-- <script src="http://localhost/sistema/public/js/app.js"></script>
-->
<script>
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
//Datemask dd/mm/yyyy
$("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
//Datemask2 mm/dd/yyyy
$("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
//Money Euro
$("[data-mask]").inputmask();
//Date range picker
$('#reservation').daterangepicker();
//Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Date picker
$('#datepicker').datepicker({
autoclose: true
});
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
//Colorpicker
$(".my-colorpicker1").colorpicker();
//color picker with addon
$(".my-colorpicker2").colorpicker();
//Timepicker
$(".timepicker").timepicker({
showInputs: false
});
});
</script>
</body>
</html>
In your HTML output you've got jQuery sourced three times on that page. First time it's sourced right before you source Flot.
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
Then later down the page you source it again here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
Then almost immediately after you do it again here:
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
Aside from loading jQuery too many times, the issue you're seeing is the first jQuery is loaded and then you source Flot which binds to that instance of jQuery. Once the next sourced instance of jQuery happens that association disappears.
Take time to assure you're sourcing jQuery once at the beginning of your sourced scripts and then source everything that depends on jQuery.
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)