I have a DataTable styled with Twitter Bootstrap 3 and using some Buttons. This is the code where it gets initialized:
bookingsTable = $('#bookings-table').DataTable({
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
},
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'excel',
className: "btn-sm",
text: 'Esporta',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
},
{
extend: 'colvis',
className: "btn-sm",
text: 'Colonne'
},
'refresh'
],
scrollY: 500,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true
});
As you can see, the buttons are centered between the dataTables_length and the dataTables_filter wrappers, which wrap the number of rows currently shown and the input search respectively.
All works as expected as long as the width is greater than 768px. When going below, the three col-sm-4 columns correctly go on their own row each, however, while the dataTables_length and the dataTables_filter are centered, the wrapper for the buttons is left-aligned, which does not make much sense, since it has the text-center class which should keep it center-aligned.
Normal table:
Shrinked table:
I think I am missing something here, however I am not able to find out the problem.
Here is a JSFiddle example.
updated: fixed the issue here: https://jsfiddle.net/phgw8kbx/11/
the div 'dt-buttons btn-group' is using 100% width which should be auto, or you need to make the elements inline-block to be center aligned.
just add this css somewhere and should work fine.
$(function() {
$.fn.dataTable.ext.buttons.refresh = {
text: 'Aggiorna',
className: 'btn-sm',
action: function (e, dt, node, config) {
}
};
bookingsTable = $('#bookings-table').DataTable({
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
},
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'excel',
className: "btn-sm",
text: 'Esporta',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
},
{
extend: 'colvis',
className: "btn-sm",
text: 'Colonne'
},
'refresh'
],
scrollY: 500,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../favicon.ico"> //TODO: set custom favicon-->
<title>Gestione avanzata</title>
<!-- Font Awesome v4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Twitter Bootstrap v3.3.7 core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Bootstrap DataTables CSS v1.10.16 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<!-- DataTables Bootstrap Buttons CSS v1.5.1 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap.min.css"/>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/bookings_manager.css" />
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12">
<h2 class="text-center">Storico prenotazioni</h2>
<!-- Vehicles' table -->
<div class="">
<table id="bookings-table" class="table table-bordered table-striped text-center" cellspacing="0" width="100%">
<thead>
<tr>
<td><strong>ID prenotazione</strong></td>
<td><strong>Veicolo</strong></td>
<td><strong>Impiegato</strong></td>
<td><strong>Centro</strong></td>
<td><strong>Data</strong></td>
<td><strong>Partenza da</strong></td>
<td><strong>Ora di partenza</strong></td>
<td><strong>Tragitto intermedio</strong></td>
<td><strong>Ritorno a</strong></td>
<td><strong>Ora di ritorno</strong></td>
<td><strong>Servizio</strong></td>
<td><strong>Motivazione</strong></td>
<td><strong>Stato</strong></td>
<td><strong>Storia</strong></td>
<td><strong>Opzioni</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal to show the history of a booking -->
<div class="modal fade" id="booking-history-modal" tabindex="-1" role="dialog" aria-labelledby="booking-history-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="booking-history-modal-label">Storico prenotazione</h4>
</div>
<div class="modal-body">
<table id="booking-history-table" class="table table-bordered table-striped text-center" cellspacing="0" width="100%">
<thead>
<tr>
<td><strong>Impiegato</strong></td>
<td><strong>Azione</strong></td>
<td><strong>Motivazione</strong></td>
<td><strong>Data e ora</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal to permanently delete a booking -->
<div class="modal fade" id="booking-delete-modal" tabindex="-1" role="dialog" aria-labelledby="booking-delete-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="booking-delete-modal-label">Elimina prenotazione</h4>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare in maniera definitiva questa prenotazione?
Essa verrà eliminata dal database, e non sarà più possibile recuperarla. Verrà eliminata anche dallo storico delle prenotazioni.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="confirm-delete-booking-button">
<span class="fa fa-trash fa-fw" aria-hidden="true"></span>
Elimina
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal to give information about the last action (error/success) -->
<div class="modal fade" id="action-info-modal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="action-info-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="closeIcon" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="action-info-modal-label"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="refresh-page-button">
<span class="fa fa-refresh fa-fw" aria-hidden="true"></span>
Aggiorna la pagina
</button>
<button type="button" class="btn btn-warning" id="report-error-button">
<span class="fa fa-bug fa-fw" aria-hidden="true"></span>
Segnala errore
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- DataTables JSzip v2.5.0 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<!-- Datatables Core JS v1.10.16 -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap DataTables Core JS v1.10.16 -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<!-- DataTables Bootstrap Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap.min.js"></script>
<!-- DataTables HTML5 Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<!-- DataTables Column Visbility Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<!-- Datatables fixedColumns JS v3.2.4 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css"/>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
</body>
</html>
div.dt-buttons {
width: auto !important;
}
Related
I want to put a frame in a css modal, but the way it is being displayed is not the most pleasant, and besides, as I did the adjustment (top and left) manually, for other screen sizes the image is misconfigured (frame outside the modal). As per the image below.
On big screen
On small screen
I used the following code to get the above results
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
background: lightgray;
}
.frame-card {
width: 800px;
height: 520px;
position: absolute;
top: 25%;
left: 31.2%;
}
</style>
</head>
<body>
<div class="container mt-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal"
data-src="https://player.vimeo.com/video/58385453?badge=0&autoplay=1&loop=1" data-target="#myModal">
Play Vimeo Video
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
allow="autoplay">
</iframe>
</div>
</div>
</div>
</div>
<img class="frame-card" src="https://uploaddeimagens.com.br/images/004/266/329/original/frame-card.png?1671470988">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script>
$(document).ready(function () {
// Gets the video src from the data-src on each button
var $videoSrc;
$('.video-btn').click(function () {
$videoSrc = $(this).data("src");
});
// when the modal is opened autoplay it
$('#myModal').on('shown.bs.modal', function (e) {
// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
$("#video").attr('src', $videoSrc);
})
// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function (e) {
// a poor man's stop video
$("#video").attr('src', $videoSrc);
})
// document ready
});
</script>
</body>
</html>
What classes or styling should I use?
Thanks in advance!
I used position property with absolute value to align the image, I don't know if it's the right approach to do, besides, I used left and top alignment, I would like a more "automatic" way to align the image.
I'm not entirely sure about your desired result but, I have managed to put the frame neatly around the video. Move the .frame-card inside the .embed-responsive.embed-responsive-16by9 right after the iframe and just give it .embed-responsive-item and no additional styles are necessary, as it will have the same size/position as the video (iframe.embed-responsive-item)
$(document).ready(function() {
// Gets the video src from the data-src on each button
var $videoSrc;
$('.video-btn').click(function() {
$videoSrc = $(this).data("src");
});
// when the modal is opened autoplay it
$('#myModal').on('shown.bs.modal', function(e) {
// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
$("#video").attr('src', $videoSrc);
})
// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function(e) {
// a poor man's stop video
$("#video").attr('src', $videoSrc);
})
// document ready
});
body {
width: 100vw;
height: 100vh;
background: lightgray;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://player.vimeo.com/video/58385453?badge=0&autoplay=1&muted=1&loop=1" data-target="#myModal">
Play Vimeo Video
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay">
</iframe>
<img class="embed-responsive-item" src="https://uploaddeimagens.com.br/images/004/266/329/original/frame-card.png?1671470988">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
Note:
You need to add &muted=1 to your video source URL in order for autoplay to work: https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplay-and-loop-embedded-videos The video doesn't work in the snippet but you can check it out in my fiddle.
This question is the same as FontAwesome - Failed to decode downloaded font, but the cause of the problem is not the same.
I have a node.js app which installs dependencies with bower. Including FontAwesome.
Whenver I open up the webpage I get the error
dash:1 Failed to decode downloaded font: http://pokpok.call-cc.be/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0
dash:1 Failed to decode downloaded font: http://pokpok.call-cc.be/lib/font-awesome/fonts/fontawesome-webfont.woff?v=4.5.0
dash:1 Failed to decode downloaded font: http://pokpok.call-cc.be/lib/font-awesome/fonts/fontawesome-webfont.ttf?v=4.5.0
When I inspect the links in Developer Tools I can see the fonts being rendered properly:
When I try to navigate to the URLs in my browser it also properly downloads the font files.
Any tips?
Ps: Link the app live is here.
index.ejs (after inject):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/png" href="/img/favicon.png"/>
<title>Pok Pok</title>
<!-- inject:js -->
<script src="/js/ie-emulation-modes-warning.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
<!-- endinject -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PokPok</a>
<!--<div id="navbar" class="collapse navbar-collapse">-->
<!--<ul class="nav navbar-nav">-->
<!--<li class="active">Home</li>-->
<!--<li>About</li>-->
<!--<li>Contact</li>-->
<!--</ul>-->
<!--</div><!–/.nav-collapse –>-->
</div><!-- /.container -->
</div><!-- /.navbar -->
<!-- HEADER
=================================-->
<!-- <div class="jumbotron text-center"> -->
<!-- <div class="container"> -->
<!-- <div class="row"> -->
<!-- <div class="col col-lg-12 col-sm-12"> -->
<!-- <h1>Pok Pok</h1> -->
<!-- <p>Eggcelent.</p> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- /header container-->
<!-- CONTENT -->
<!-- ================================= -->
<div class="container">
<!--Live stream-->
<div class="row">
<div class="col-md-12">
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop controls class="embed-responsive-item">
<source src="https://call-cc.be/rpi">
</video>
</div>
</div>
</div>
<!--Graphs-->
<div class="row">
<div class="col-md-6" id="humidity"></div>
<div class="col-md-6" id="temperature"></div>
<div class="col-lg-6 col-md-6">
<div class="panel panel-blue">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-cloud fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><%= humid %> %</div>
<div>Humidity</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-sun-o fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><%= temp %> ËšC</div>
<div>Temperature</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
Live stream of Ada and Frida. Two hot chicks.
</div>
</div>
</div>
<hr>
<!-- /CONTENT ============-->
<!-- bower:css -->
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
<!-- endbower -->
<!-- bower:js -->
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- inject:css -->
<link rel="stylesheet" href="/css/style.css">
<!-- endinject -->
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/graphs/gengraph.js"></script>
<script>
genGraph("#humidity", "/push/humidity", "Humidity (%)", "humidity-line");
genGraph("#temperature", "/push/temperature", "Temperature (ËšC)", "temperature-line");
</script>
</body>
</html>
bower.json
{
"name": "cost-tracker",
"description": "",
"main": "index.js",
"authors": [
"Christophe De Troyer <christophe.detroyer#gmail.com>"
],
"license": "ISC",
"moduleType": [],
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "~3.3.6",
"font-awesome": "~4.5.0"
},
"overrides": {
"bootstrap": {
"main" : [
"dist/js/bootstrap.js",
"dist/css/bootstrap.min.css",
"less/bootstrap.less"
]
},
"font-awesome": {
"main": [
"less/font-awesome.less",
"css/font-awesome.min.css",
"scss/font-awesome,scss"
]
}
}
}
gulpfile.js
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var nodemon = require('gulp-nodemon');
var jscs = require('gulp-jscs');
var jsFiles = ['*.js', 'src/**/*.js'];
gulp.task('style', function () {
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'), {
verbose: true
})
.pipe(jscs());
});
gulp.task('inject', function () {
var wiredep = require('wiredep').stream;
var inject = require('gulp-inject');
var injectSrc = gulp.src(['./public/css/*.css',
'./public/js/*.js'], {read: false});
var injectOptions = {
ignorePath: '/public'
};
var options = {
bowerJson: require('./bower.json'),
directory: './public/lib',
ignorePath: '../../public',
addRootSlash: false
};
return gulp.src('./src/views/*.ejs')
.pipe(wiredep(options))
.pipe(inject(injectSrc, injectOptions))
.pipe(gulp.dest('./src/views'));
});
gulp.task('serve', ['style', 'inject'], function () {
var options = {
script: 'app.js',
delayTime: 1,
env: {
'PORT': 5000,
'POSTGRES': 'postgres://user:ps#localhost:5432/pokpokdb'
},
watch: jsFiles
};
return nodemon(options).on('restart', function (ev) {
console.log('Restarting');
});
});
I have a problem with Internet Explorer and HTML code. With Chrome, Edge and firefox all work fine, but in Explorer I have this
instead of
In debug mode I see some error into html code only with explorer:
-Translate:
It has been found tag in excess. In a document is allowed only one body tag.
element or end not expected. All the elements opened have to be closed before the second document end.
Token not expected
The body tag is added by browser. All other page works fine. Do you see something wrong in my code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Spring csrf -->
<meta name="_csrf" th:content="${_csrf.token}" />
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fleets & cars</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap Core CSS -->
<link th:href="#{/static/assets/bootstrap/css/bootstrap.css}"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
th:href="#{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}">
<!-- DataTables -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<!-- Theme style -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/skins/_all-skins.min.css}">
<!-- Select2 angular -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/select2Angular/select.css}">
<!-- jQuery 2.1.4 -->
<script th:src="#{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
type="text/javascript"></script>
<!-- Bootstrap 3.3.5 -->
<script th:src="#{/static/assets/bootstrap/js/bootstrap.min.js}"
type="text/javascript"></script>
<!-- DataTables -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<!-- Slimscroll -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/fastclick/fastclick.min.js}"></script>
<!-- Bootstrap-growl -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script>
<!-- AdminLTE App -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/app.min.js}"></script>
<!-- Angularjs -->
<script th:src="#{/static/assets/js/angular.min.js}"
type="text/javascript"></script>
<!-- Select2 angular -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/select2Angular/select.js}"></script>
<!-- Waiting modal -->
<script
th:src="#{/static/assets/plugins/waiting-modal/waiting-modal.js}"
type="text/javascript"></script>
<script type="text/javascript"
th:src="#{/static/assets/js/fleetAndCar.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="myApp">
<input type="hidden" id="role"
th:value="${#authentication.getAuthorities()}">
<div class="wrapper" data-ng-controller="createFleetController"
id="createFleetControllerId">
<!-- Header nd menu fragment -->
<div th:replace="../fragments/dashboard-header :: dashboard-header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Fleets Management</h1>
<ol class="breadcrumb">
<li><a th:href="#{/}"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Fleets management</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Fleets</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Fleets table -->
<table id="fleetsTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Managed by</th>
<th>Cars</th>
<th>Add User</th>
<th>Delete</th>
</tr>
</thead>
</table>
<!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip.
This is need because otherwise the text goes out the button -->
<button id="addFleetButton" type="button"
class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
data-toggle="modal" data-target="#addFleetModal">Add
fleet</button>
<button id="addFleetButton" type="button"
class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
data-toggle="modal" data-target="#addFleetModal">
<span class="glyphicon glyphicon-plus" data-toggle="tooltip"
title="Add fleet"></span>
</button>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- Modal to add car -->
<div class="modal" id="addFleetModal">
<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">Fleet parameters</h4>
</div>
<div class="modal-body">
<!-- form start -->
<form novalidate class="simple-form" name="newFleetForm">
<div class="box-body">
<div class="form-group">
<label>Application</label> <input
data-ng-model="newFleet.application" id="application"
type="text" class="form-control" placeholder="Application"
name="application" required>
</div>
<div class="form-group">
<label>Cubic</label> <input id="cubic"
data-ng-model="newFleet.cubic" type="text"
class="form-control" placeholder="Cubic" required>
</div>
<div class="form-group">
<label>Power</label> <input data-ng-model="newFleet.power"
id="power" type="number" min="0" step="1" class="form-control"
placeholder="Power" required>
</div>
<div class="form-group">
<label>Euro class</label> <input
data-ng-model="newFleet.euroClass" id="euroClass" type="text"
class="form-control" placeholder="Euro Class" required>
</div>
<div class="form-group">
<label>Engine type</label> <input
data-ng-model="newFleet.engineType" id="engineType"
type="text" class="form-control" placeholder="Engine type"
required>
</div>
<div class="form-group">
<label>Traction</label> <input
data-ng-model="newFleet.traction" id="traction" type="text"
class="form-control" placeholder="Traction" required>
</div>
<div class="form-group">
<label>Transmission</label> <input
data-ng-model="newFleet.transmission" id="transmission"
type="text" class="form-control" placeholder="Transmission"
required>
</div>
<div class="form-group">
<label>Note </label>(optional)
<textarea data-ng-model="newFleet.note" class="form-control"
rows="3" maxlength="1000"></textarea>
</div>
<div class="form-group" id=existingEcu>
<label>Ecu</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newFleet.ecu" required> <ui-select-match
placeholder="Select ecu">
{{$select.selected.note}}</ui-select-match> <ui-select-choices
repeat="ecu.idEcu as ecu in (ecuList | filter: $select.search) track by ecu.note">
<span data-ng-bind="ecu.note"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-disabled="newFleetForm.$invalid"
data-ng-click="createFleet(newFleet)" id="createFleetButton"
type="button" class="btn btn-primary">Create fleet</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete Fleet -->
<div class="modal" id="deleteFleetModal">
<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">Delete fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">Are you sure? The fleet will be
deleted permanently, you won't be able to recover it.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteFleet()" id="deleteFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete User from Fleet -->
<div class="modal" id="deleteUserFleetModal">
<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">Delete user from fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
Are you sure to remove <label data-ng-bind="user"></label>
management from fleet <label data-ng-bind="fleetApplication"></label>?
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteUserFleet(user,fleetId)"
id="deleteUserFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal add User from Fleet -->
<div class="modal" id="addUserFleetModal">
<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">Add user to fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-group" id=fleetUser>
<label>Select user</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="username" required> <ui-select-match>
{{$select.selected}}</ui-select-match> <ui-select-choices
repeat="username in (fleetUserList | filter: $select.search) track by username">
<span data-ng-bind="username"></span> </ui-select-choices> </ui-select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-primary btn-ok"
data-ng-click="addUserFleet(username)" id="addUserFleetButton">Add</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
I've got an odd one here guys, all I've done is include a standard YouTube subscribe button on a Bootstrap 3 modal box and on Firefox 45.0.2 the tooltip goes crazy and flashes over and over (on and off) incrementing its z index over and over again.
I've created a fiddle to demonstrate the problem.
https://jsfiddle.net/djhxLk59/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Youtube Subscribe Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" onclick="; return false;" data-toggle="modal" data-target="#myModal">
Launch demo modal using data-toggle
</button>
<button type="button" class="btn btn-primary btn-lg" onclick='$("#myModal").modal("show"); return false;'>
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>This is a test to show how the Youtube Subscribe button doesn't work on Firefix</p>
<script src="https://apis.google.com/js/platform.js"></script>
<p><span id="youtube-follow-circle"></span>Subscribe on <span>YouTube</span>
<br />
</p>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="britneyspears" data-layout="default" data-count="default"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
You can see here that when you hover over the YouTube button the tooltip goes nuts.
This jsfiddle works fine on Chrome, Safari and Opera.
Interestingly, when I open the modal as soon as the page is loaded, as in this example:
https://jsfiddle.net/od4eo13m/
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
then the YouTube tooltip works fine!
I am so confused here, it's driving me nuts.
Would love any hints please.
Kind regards, Jason.
I used to work with jquery and it was easy to manipulate dom or even hide some content and show another inside a container. Need help in Angularjs to achieve something similar to show or hide a template inside a container on button click.
My main reports page
<div style="margin-left:25px;margin-bottom:10px">
<button class="btn glyphicon glyphicon-stats" ng-click="showChartView()"></button>
<button class="btn glyphicon glyphicon-th-list" ng-click="showTableView()"></button>
</div>
<div class="row" style="width:100%; margin:0px">
<!--Chart or Table view-->
<div class="col-md-10" style="width:70%;margin-right:0px" id="container">
</div>
<!--Filter-->
<div class="col-md-2" style="width:30%;margin-left:0px">
<div ng-include='"templates/reports/filters.html"'></div>
</div>
</div>
$scope.showChartView = function() {
//should display charttemplate.html inside container
}
$scope.showTableView = function() {
//should display tabletemplate.html inside container
}
Need help in Angularjs to achieve something similar to show or hide a
template inside a container on button click.
how to load chart view by default?
just add hide/show in the button action?
can you give an example. I am new in Angularjs
1) Using ng-include, ng-click, ng-show, ng-hide
This works for me:
app.js:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.should_show_chart = true;
}]);
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<meta charset="UTF-8"> <!-- For html5 (default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MyCtrl" class="container">
<div>
<button type="button"
class="btn btn-default"
ng-click="should_show_chart=true">
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</button>
<button type="button"
class="btn btn-default"
ng-click="should_show_chart=false">
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</button>
</div>
<div class="row">
<!--Chart or Table view-->
<div ng-include="'chart.html'" *****NOTE THE INTERIOR SINGLE QUOTES****
ng-show="should_show_chart" **ng-show explained below
class="col-md-6"
id="container">
</div>
<div ng-include="'table.html'" ****NOTE THE INTERIOR SINGLE QUOTES****
ng-hide="should_show_chart" ***ng-hide explained below
class="col-md-6"
id="container">
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
chart.html:
<h3>Chart</h3>
table.html:
<h3>Table</h3>
If ng-show is a true value, then the tag is made visible; if ng-hide is a true value, then the tag is hidden.
Note that according to the Bootstrap docs:
icon classes...should not be used along with other classes on the same
element. Instead, add a nested <span> and apply the icon classes to
the <span>.
And for accessibility reasons, you are supposed to add the attribute:
aria-hidden="true"
to the tag which specifies the glyphicon classes.
http://getbootstrap.com/components/
2) Using angular-ui-router
...which requires linking to an additional js script:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS with UI-Router</title>
<meta charset="UTF-8"> <!-- For html5 (the default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div>
<a class="btn btn-default"
ui-sref="chart" ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the chart 'state'(see app.js).
ui-sref-active="active"> ***When the chart 'state' is activated, the specified class is added to the class attribute
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</a>
<a class="btn btn-default"
ui-sref="table" ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the table 'state'(see app.js)
ui-sref-active="active"> ***When the table 'state' is activated, then the specified class is added to the class attribute
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</a>
</div>
<!--Chart or Table view-->
<div ui-view></div> ***TEMPLATES ARE INSERTED HERE DEPENDING ON WHAT STATE IS ACTIVE****
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Angular-UI-Router -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
//Set the default route, which will load the associated state:
$urlRouterProvider.otherwise('/chart');
//Define the states:
$stateProvider
.state('chart', {
url: '/chart',
templateUrl: 'chart.html'
})
.state('table', {
url: '/table',
templateUrl: 'table.html'
});
}]);
3) Using ng-switch, ng-include (per xe4me's answer):
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<meta charset="UTF-8"> <!-- For html5 (default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div>
<button type="button"
class="btn btn-default"
ng-click="should_display='chart'">
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</button>
<button type="button"
class="btn btn-default"
ng-click="should_display='table'">
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</button>
</div>
<div class="row">
<!--Chart or Table view-->
<div ng-switch="should_display">
<!-- should_display is only assigned a value after a button is clicked-->
<div ng-switch-default
ng-include="'chart.html'"
class="col-md-6"
id="container">
</div>
<div ng-switch-when="chart"
ng-include="'chart.html'"
class="col-md-6"
id="container">
</div>
<div ng-switch-when="table"
ng-include="'table.html'"
class="col-md-6"
id="container">
</div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', []);
Instead of using a <div> with the ng-switch-default attribute to display a default view, you could use a controller to set the initial value of should_display. To do that, delete the <div> containing the ng-switch-default attribute, then add ng-controller="MyCtrl" to the <body> tag, and change app.js to this:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.should_display = 'chart';
}]);
Your best bet would be using the ng-include directive and putting currently used template URL into a scope variable.
<div ng-include="view"></div>
Changing displayed view is then done using a simple assignment
$scope.showChartView = function () {
$scope.view = '/path/to/chartView.fragment.html';
};
I think the best way of doing this is using ng-switch there you can use ng-include and change the content with one click.
you can check my answer here :
ng-switch