The topic sums it up, I have an angular app that I start with ...
ng serve
and I build using ...
ng build
When I build the application, deploy it, and go to the debug console on the home page of the app and run
> window.innerWidth
1280
> window.innerHeight
610
Which seem to be correct according to https://www.rapidtables.com/web/tools/window-size.html.
When I go to the home page of the app deployed locally (using ng serve) and run the same commands i get incorrect window sizes ...
> window.innerWidth
1707
> window.innerHeight
813
What could be causing this? I would supply more code but I don't even know where to start with this issue.
for some context, here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RDF</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- Bootstrap 4 Autocomplete -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-4-autocomplete/dist/bootstrap-4-autocomplete.min.js" crossorigin="anonymous"></script>
</head>
<body class="fill">
<app-root></app-root>
</body>
</html>
Appreciate the help!
I have restarted the system and updated the window OS.
Now it's showing correctly the viewport for ng serve and ng build.
Related
I am currently trying to push my website from my computer to a remote server, everything works fine except a few Bootstrap components (carousel and cards) which are animated with JS.
The problem is that locally it works just fine, my divs show up and do their things as expected, but on the remote server its just a blank area.
I tried replacing the CDNs and playing with them but nothing has changed.
Does anybody encountered this issue before or knows how to fix it?
Here are the CDN links in my <head>:
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu"
rel="stylesheet"
/>
<!-- CSS Stylesheets -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome -->
<script
defer
src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
></script>
<!-- Bootstrap Scripts -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
I do see errors in my console every time the page loads I get:
GET coowoork.000webhostapp.com/js/index.js net::ERR_ABORTED 404
index.html:168
GET coowoork.000webhostapp.com/images/techcrunch.png 404 VM143:137 DomDistiller debug level: 0
GET coowoork.000webhostapp.com/images/techcrunch.png 404
I've been trying to add Bootstrap <link> and <script> tags to my HTML in an Angular project. I get all the CDN from here but I get the following error
Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap.min.js:6
What am I doing wrong? Here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Update: I included the electron tag to this question since this is an Angular project running with Electron framework, thinking now it could be part of the problem.
I notice
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"
which to me isn't supposed to be there. this is maybe what's causing the issue.
ALSO
Why don't you add bootstrap locally instead? it has a lot of advantages and is how the majority of us do it.
in your Powershell or CMD or your IDE (coding program)'s console type either :
(for Bootstrap 4 (in beta)):
npm install bootstrap#next --save
OR
(for Bootstrap 3)
npm install bootstrap --save
Configure .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
configure src/style.css or src/style.scss:
#import '~bootstrap/dist/css/bootstrap.min.css';
or you could use ngx-bootsrap wich is an angular wrapper for bootstrap.
there's ups and downs to that. ngx-bootstrap is missing many components overall and doesn't have the latest and greatest in bootstrap but at least it's tailored for use in angular.
sources :
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
How to add bootstrap to an angular-cli project
It might have to do with this:
link
Try to include only the minified version (not the slim.min):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Bootstrap relies on jQuery. In your index HTML, before you include any of the Javascript imports, you'll want to do something like this:
<script>
var $ = jQuery = require("jquery")
</script>
Hello I am building a website for a friend and the site looks good on chrome but when I try to test it for firefox it looks nothing like the chrome version. Looking at the debugger for firefox it seems like the bootstrap css is not loading from the CDN. Any tips would be appreciated! Here is the part of my code that calls the bootstrap CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<script src="https://use.typekit.net/edr3ydd.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\about.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.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<title>About</title>
</head>
<body>
I suggest you to never use CDN when developing websites or applications for other people. CDNs are great to bootstrap the layout when you are doind something by yourself as a draft.
But when it comes to distribution for third people I suggest you to download bootstrap package and use it on the local server where the HTML page is.
Just to test this, download a copy and serve your CSS files locally. Firefox might be blocking your asset requests. Check for console error messages in firefox.
I'm a very new programmer with no experience with tabletools or swf paths whatsoever. I'm trying to implement Table Tools to print/export/etc but so far only print is working for me. Most solutions have said that means the swf path is incorrect. But I have no idea what to put as my swf path. Could anybody please help? Sorry for such a basic question. :(
Here are my plugins and script for dataTables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" />
<script>
$(document).ready(function () {
$('#table_id').DataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
You can browse tabletools files available for cdn here: datatable tabletools plugin files
by visiting the link you will find version list, click one for example 2.2.2
so scroll down to the bottom and see magic:
swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls.swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf
I use Pure CSS to make my website responsive, but when this site runs on my own computer, it looks fine:
But after I uploaded it to my remote server, it's like too far from right border of the window:
I've debugged the site on both servers with iPhone Safari remote debugger, I'm sure every CSS and Javascript source was loaded correctly. Here's my index.html page:
<!doctype html>
<html lang="en" ng-app="martianblog">
<head>
<title>{{.Title}}|{{.Subtitle}}</title>
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/pure/0.3.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/notification.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/highlight.js/7.4/styles/monokai_sublime.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css">
</head>
<body>
<div notifications="bottom right"></div>
<div class="pure-u-1" ui-view></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/moment.js/2.4.0/moment.min.js"></script>
<script type="text/javascript" src="/static/js/lib/highlight.pack.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/marked/0.2.9/marked.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-sanitize.min.js"> </script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/static/js/app.js"></script>
<script type="text/javascript" src="/static/js/controllers.js"></script>
<script type="text/javascript" src="/static/js/filters.js"></script>
<script type="text/javascript" src="/static/js/directives.js"></script>
<script type="text/javascript" src="/static/js/lib/notification.js"></script>
</body>
</html>
Here's my custom css file's link
My computer's system: Mac OS X Mavericks
My remote server's system: Ubuntu 12.04 GNU/Linux 3.2.0-24-virtual i686
Nginx version on my remote server: nginx/1.1.19
As others have mentioned, very difficult to suggest anything without at least a link to your css file(s).
Some things to check: html doctype declaration, browser cache, file encoding types, any fixed widths that may have been set in your CSS....... Perhaps you have uploaded a file that has a capital letter in its filename? May not be an issue locally, but could be an issue on your server.
edit: I have checked out your site and it looks full width to me, are you sure you have fully cleared your cache?
Your viewport is currently set to:
<meta name="viewport" content="width=device-width" initial-scale=1.0>
Perhaps this should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />