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');
});
});
Related
Im using the barryvdh dompdf to generate the pdf file for my view ,
This is the expected outcome:
but what I got is ：
The css design of the view has been change . im using both css and bootsrap for desgining the page
may I ask how the improve this?
here is my code on view
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- 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 rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<title>
Events Ticket
</title>
</head>
<style>
h6
{
color: #96a0a5;
}
h3
{
color: #b7af92;
}
p{
caret-color: white;
}
span{
color:#b7af92 ;
}
</style>
<body>
<div class="container mt-5 ms-5 " >
<div class="row">
<div class="col-lg-8 mb-4">
#foreach ($tickets as $key=> $ticket)
<div class="card" >
<div class="card-body" style="background-color: #48617d;">
<div class="col-12">
<div class="row" >
<div class="col-6" >
<h6 class="card-title">Event : <span>{{ $ticket->GiftGiving->name }}</span></h6>
<h6 class="card-title ">Name: <span>{{ $ticket->name }}</span></h6>
<h6 class="card-title ">Date &Time: <span>{{ $ticket->GiftGiving->start_at }}</span></h6>
<h6 class="card-title ">Venue: <span> {{ $ticket->GiftGiving->venue }}</span></h6>
</div>
<div class="col-6 text-center mt-3" style=" border-left-style: dashed; border-color: #b7af92;">
<h6><span >Ticket No. {{ $ticket->ticket_no }}</span></h6>
<h6><span class="mt-5">Batch No: {{ $ticket->GiftGiving->batch_no}} </span></h6>
</div>
</div>
</div>
</div>
</div>
#endforeach
</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
code of my controller:
public function GenerateTicket($code)
{
$GiftGiving = GiftGiving::where('code', $code)->firstOrFail(); //4.3 ??
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $GiftGiving->id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = $GiftGiving->batch_no;
GiftGiving::where('code', $code)->firstOrFail()->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
Any answer is high appreciated, feel free to drop answer . Thank you in advance.
new updated part
this is how it looks like inside the browser
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
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;
}
I have the following code and I an unable to find out why my controller is not getting called? -
index.html -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="myApp">
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- FORM ============ -->
<form name="userForm" ng-submit="main.submitForm()" novalidate>
<!-- USERNAME -->
<div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- Password -->
<div class="form-group" ng-class="{ 'has-error' : userForm.pwd.$invalid && !userForm.pwd.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.pwd">
<p ng-show="userForm.pwd.$invalid && !userForm.pwd.$pristine" class="help-block">Enter a valid Password.</p>
</div>
<button type="submit" class="btn btn-primary col-xs-12" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
<div class="footer footertxt">
<div class="container">
<p>#Copyright xyz</p>
</div> </div>
<script type="text/javascript" src="cordova.js"></script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/services/cordova.js"></script>
<!-- endbuild -->
</body>
</html>
main.js:
'use strict';
angular.module('myApp')
.controller('MainCtrl', function ($scope, cordova) {
console.log("Hello...")
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
cordova.ready.then(function () {
alert('Cordova is ready');
});
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
console.log("For submitted..")
}
};
});
app.js:
/**
* #ngdoc overview
* #name angularCordovaTickrv01App
* #description
* # myApp
*
* Main module of the application.
*/
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.otherwise({
redirectTo: '/'
});
});
Modify your ng-submit, you don't have to put main.submitForm()
<form name="userForm" ng-submit="submitForm()" novalidate>
Also, you have an error in your controller with your cordova injection.
Have a look at this Plunker
I don't see any where in your index.html having ng-view, from where your view gets loaded. place <div ng-view></div>
Since you call submitForm on the controller variable you should not set the function on $scope but on the controller:
// $scope.submitForm = function() {
this.submitForm = function() {
I am building a SPA with AngularJS, everything is working as I hoped except that I am running into issues regarding its appearance on mobile (I am using twitter bootstrap 3). The two issues in particular are:
Vertical scrolling on mobile is very jerky and sometimes gets stuck
On some pages the users mobile screen automatically zooms in on an input field, which is fine. However, I want to undo this zoom when they change partial; because otherwise when the user gets to the next partial everything is too zoomed.
I have had a look around and can't see an answer to these. I haven't put code in here, as it pretty much effects the whole site :) However, for a demonstration of the issue you can see on the site itself: www.objectivemoney.co.za.
Any help would be much appreciated!
UPDATE TO INCLUDE CODE
Index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="omApp">
<head>
<title>OM</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find your perfect planner | Quickly search for and compare verified, customer reviewed planners in your area with OM">
<meta name="keywords" content="search,financial,planner,compare,verified,planners">
<!-- load bootstrap and fontawesome via CDN -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='toaster/toaster.css' rel='stylesheet' type='text/css'>
<!-- load CSS files locally -->
<link rel="stylesheet" href="style-min.css" />
<link rel="stylesheet" href="angular-slider-master/slider.css" />
<link rel="stylesheet" href="animate.min.css" />
<!-- sharethis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', { 'cookieDomain': 'none' });
</script>
</head>
<body>
<!-- create a navbar that is collapsable in a mobile view -->
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="searchController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"> <img id="navbarlogo" src="./img/logo/logo-white.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Search</li>
<li>Resources</li>
<li>Planner Registration</li>
</ul>
</ul>
<!-- create a logout sign that shows when a user is logged in, position this on the right of the navbar -->
<ul ng-show="authenticated === true" class="nav navbar-nav pull-right logoutlink ng-cloak">
<ul class="nav navbar-nav navbar-right">
<li><a ng-controller="searchController" ng-click="logout(); changeAuth()">Logout</a></li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Create container for app views -->
<div class="wrapper">
<!-- set empty div for views, autoscroll means that page scrolls to top when user clicks through -->
<div ng-view autoscroll="true"></div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<div>
<div id="footershare" class="col-sm-6">
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<div id="footercontact" class="col-sm-6">
<p>Contact: xxx#xxx.co.za | Copyright ©</p>
</div>
</div>
</footer>
</div>
<div class="ng-cloak" ng-controller="searchController">
<div ng-show="showBar" class="signupBox">
<p id ="signupBox-text"><span ng-click="setCloseBar();setShowBar()" class="signupBox-close pull-right"><b>×</b></span><a id ="signupBox-text" href="#/mailinglist" ng-click="setCloseBar();setShowBar()">Join Our Mailing List To Stay Up To Date With The Latest Planning Advise And News.</a></p>
</div>
</div>
<!-- load angular and additional precompiled services -->
<script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.4.1/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-resource.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="vs-google-autocomplete.min.js"></script>
<script src="angulartics.min.js"></script>
<script src="angulartics-ga.min.js"></script>
<script src="toaster/toaster.js"></script>
<script src="ui-bootstrap-0.13.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="angular-slider-master/slider.js"></script>
<script src="bower_components/ng-optimizely/ng-optimizely.js"></script>
<!-- load angular app -->
<script src="modules/omApp.js"></script>
<!-- load custom services -->
<script src="services/services.min.js"></script>
<script src="services/data.min.js"></script>
<!-- load angular controllers -->
<script src="controllers/minified/searchController.js"></script>
<script src="controllers/minified/resourcesController.js"></script>
<script src="controllers/minified/plannerRegController.js"></script>
<!-- directives -->
<script src="directives/directive.min.js"></script>
</body>
<!-- toaster-container that shows when a user log ins and log out [CURRENTLY THE TOASTER SHOWS FOR TOO LONG AND TIME OUT FUNCTION DOES NOT CHANGE TOASTER DISPLAY TIME] -->
<toaster-container toaster-options="{'time-out': 2000}"></toaster-container>
</html>
Home Partial
<div class="jumbotron">
<div class="container">
<div class="homepage-jumbo-info col-sm-offset-7 col-sm-5">
<div class="homepage-jumbo-info-header">
<h1>We'll help you find a <br><b> planner</b>, hassle-free</h1>
</div>
<div class="homepage-jumbo-info-box">
<h2 class="homepage-jumbo-info-boxheader"><b>Compare verified planners</b> in your area</h2>
<input vs-google-autocomplete="options"
ng-model="searchquery.address.name"
vs-street-number="searchquery.address.streetNumber"
vs-street="searchquery.address.street"
vs-city="searchquery.address.city"
vs-state="searchquery.address.state"
vs-country-short="searchquery.address.countryCode"
vs-country="searchquery.address.country"
vs-latitude="searchquery.lat"
vs-longitude="searchquery.long"
type="text"
name="address"
id="address"
class="form-control homepage-jumbo-info-boxinput"
placeholder="In which city / suburb do you live?">
</div>
<div class="form-group homepage-searchbutton homepage-jumbo-info-boxbutton">
<p id="homepage-searchbutton-text">SEARCH NOW <i class="fa fa-search"></i></p>
</div>
</div>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>Find The Right Planner With 3 Simple Steps</b></h2>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/search.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SEARCH</b></h3>
<p class="homepage-body-icons-text">Search for independently verified planners in your local area that can meet your requirements.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/compare.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>COMPARE</b></h3>
<p class="homepage-body-icons-text">Compare planners based on their offerings, qualifications and actual customer reviews.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/schedule.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SCHEDULE</b></h3>
<p class="homepage-body-icons-text">Click to automatically schedule a meeting with your chosen planner at a time that suits you.</p>
</div>
</div>
<div class="row homepage-body-carousel-header">
<div class="col-sm-12 homepage-body-header">
<h2><b>Our Planners Partner With The Biggest Companies In South Africa</b></h2>
</div>
</div>
<div class="row homepage-body-carousel">
<carousel interval="myInterval" disable-animation="true">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="img/sitephotos/{{slide.image}}.png" alt="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
<div class="container-fluid homepage-body-video">
<p class="homepage-body-video-text">Watch our short video to see how it works in more detail</p>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-rsr45s2mws" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>How OM Helps You</b></h2>
</div>
<div class="row">
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/independent.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>INDEPENDENT</b></h3>
<p class="homepage-body-icons-text">All of our advisers have been independently verified, helping you to avoid any sharks.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/user-review.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>USER REVIEWED</b></h3>
<p class="homepage-body-icons-text">All of our advisers are reviewed by genuine users, helping you make sure that the adviser is the right match for you.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/tailored.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>TAILORED</b></h3>
<p class="homepage-body-icons-text">Search functionality lets you specify your ideal adviser.</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/quick.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>QUICK</b></h3>
<p class="homepage-body-icons-text">No need for lengthy internet research, enquiry calls or getting hold of friends and family to help you.</p>
</div>
<div class="col-sm-offset-right-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/free-2.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>FREE</b></h3>
<p class="homepage-body-icons-text">Our service is entirely free of charge.</p>
</div>
</div>
</div>
Jack