I am having some troubles installing PrimeNG properly to use its rich text editor. I've installed everything I would need and it still doesn't work.
Here is my package.json :
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"lodash": "^4.15.0",
"ng2-dropdown": "0.0.12",
"primeng": "^1.0.0-beta.13",
"primeui": "^4.1.15",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
My typings.json :
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
},
"dependencies": {
"lodash": "registry:npm/lodash#4.0.0+20160723033700"
}
}
My index.html :
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>My page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="/assets/css/styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<script src="node_modules/primeui/primeui-ng-all.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
So I called {EditorModule, SharedModule} in directives of both my app.components.ts and the component where I want to see this;
<p-editor [style]="{'height':'320px'}">
<header>
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
</header>
</p-editor>
I searched everywhere in this forum but couldn't figure out how to solve this probleme. Can someone please suggest anything? Thanks!
I had a lot of trouble gettings things like the calendar to run. I finally solved it by looking at the demo sample index.html and making sure I was loading all of the scripts they load. There are dependencies on primeUI and jquery, etc. There are plenty:
<link id="themeStyleSheet" rel="stylesheet" type="text/css" href="vendor/primeui/themes/pepper-grinder/theme.css" />
<link rel="stylesheet" type="text/css" href="vendor/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="../app/app.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="vendor/core-js/client/shim.min.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<!-- sweet alert -->
<script src="vendor/ng2-sweetalert2/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<!-- Datetimepicker, Slider, Schedule -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>
<!-- CodeHighligther -->
<script src="../app/resources/js/prism.js" data-manual></script>
<!-- Charts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<!-- Schedule -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.min.js"></script>
<!-- InputMask -->
<script src="../app/resources/js/jquery.inputmask.bundle.js"></script>
Related
I am using Angular Bootstrap in my project for styling. When I am using ngbDropdown, the Dropdownlist is always shown below the actual dropdown item:
This is the HTML I am using:
<div ngbDropdown class="d-block" id="tedder-select">
<button class="btn btn-primary w-100" id="dropdown-tedder" (click)="scrollToTedder()"
ngbDropdownToggle>{{selectedTedder}}</button>
<div ngbDropdownMenu aria-labelledby="dropdown-tedder">
<button ngbDropdownItem *ngFor="let tedder of tedders"
(click)="selectTedder(tedder)">{{tedder}}</button>
</div>
</div>
In index.html I am adding the following scripts/css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
My Dependencies in package.json:
"dependencies": {
"#angular/animations": "~10.1.3",
"#angular/cdk": "^10.2.7",
"#angular/common": "~10.1.3",
"#angular/compiler": "~10.1.3",
"#angular/core": "~10.1.3",
"#angular/forms": "~10.1.3",
"#angular/localize": "~10.1.3",
"#angular/material": "^10.2.7",
"#angular/platform-browser": "~10.1.3",
"#angular/platform-browser-dynamic": "~10.1.3",
"#angular/platform-server": "~10.1.3",
"#angular/router": "~10.1.3",
"#ng-bootstrap/ng-bootstrap": "^8.0.0",
"#nguniversal/express-engine": "^10.1.0",
"angular-in-memory-web-api": "~0.11.0",
"bootstrap": "^4.5.0",
"express": "^4.15.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.2",
"#angular/cli": "~10.1.3",
"#angular/compiler-cli": "~10.1.3",
"#nguniversal/builders": "^10.1.0",
"#types/express": "^4.17.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-marbles": "~0.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.3"
}
Thank's for your help!
I'm working on a webpage for a friend as training using bootstrap 4 for the first time following along with a tutorial and I seem to be doing everything alright up to the point where the teacher starts styling using a sass file. I can't figure out why the code on the scss file isn't doing anything.
I started following along from scratch a couple of times to find possible incongruences but didn't find anything. Could be something related to deprecated versions of GitHub project?
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<title>As Maiores Duvidas</title>
</head>
<body id="home">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container">
<a href="index.html" class="navbar-brand">As Maiores
Duvidas</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Sobre o Livro
</li>
<li class="nav-item">
Sobre o Autor
</li>
<li class="nav-item">
Compre o Livro
</li>
<li class="nav-item">
Entre em contato
</li>
</ul>
</div>
</div>
</nav>
<!-- nav tag with a couple of classes sm creates the hamburget to show only in small screens-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here's the SCSS code
$bg-color:red;
$font-color:#fff;
$primary-color:#008ed6;
body{
background:$bg-color;
color: $font-color;
}
.navbar {
border-bottom: $primary-color 3px solid;
opacity: 0.8;
}
package.json content:
{
"name": "bs4starter",
"version": "1.0.0",
"description": "Bootstrap 4 starter workflow",
"main": "index.js",
"scripts": {
"start": "gulp"
},
"author": "Brad Traversy",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"node-sass": "^4.12.0",
"popper.js": "^1.11.1"
},
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0"
}
}
You probably didn't compile the SCSS file into CSS. I see that you have node-sass in your package.json file. You can either run
node-sass src/style.scss dest/style.css
or add it to a start script so it runs every time you start the server. I don't recommend doing this though, as you don't always modify this file and it adds time to your boot
I am using prime ng and I can't get the controls to appear with the icons. All I'm getting are boxes but when I use fontawesome outside the prime controls, everything works fine.
I uses NPM to install.
Here is my
index.html page
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/" >
<title>Acme Product Management</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="assets/scripts/angular.min.js"></script>
<script src="assets/scripts/angular-route.min.js"></script>
<script src="assets/scripts/angular-local-storage.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<link href="node_modules/#angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/CustTheme1/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<pm-app></pm-app>
<script src="assets/scripts/jquery-3.1.1.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
**Package.json**
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "^2.4.9",
"#angular/compiler": "^2.4.9",
"#angular/core": "^2.4.9",
"#angular/forms": "^2.4.9",
"#angular/http": "^2.4.9",
"#angular/material": "^2.0.0-beta.2",
"#angular/platform-browser": "^2.4.9",
"#angular/platform-browser-dynamic": "^2.4.9",
"#angular/router": "^3.4.9",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"primeng": "^2.0.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.2.0",
"systemjs": "^0.20.9",
"zone.js": "^0.7.7"
},
"devDependencies": {
"concurrently": "^3.4.0",
"lite-server": "^2.2.0",
"tslint": "^4.5.1",
"typescript": "^2.0.2",
"typings": "^2.1.0"
},
"repository": {}
}
I had boxes appear in place of FontAwesome icons once because I overwrote the font-family attribute with "Open Sans" (my font family for the rest of the app)
It was overwriting the FontAwesome's default font-family of "FontAwesome" with Open Sans, so all the icons appeared as boxes.
I would verify that your font-family attribute for FontAwesome isnt being overwritten somewhere. Hopefully that solves it...
So I have this Yeoman angular fullstack MEAN project where I have added the material design icons to my bower_components. however this is not automaticly added to my index.html page like all my other .css files.
Is there a way to make this happen, because at the moment whenever I start my project I have to add the reference to the .css file manually.
my index.html looks like this
<head>
...
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" href="app/app.css">
<!-- injector:css -->
<link rel="stylesheet" href="app/account/login/login.css">
<link rel="stylesheet" href="app/admin/admin.css">
<link rel="stylesheet" href="app/app.css">
<link rel="stylesheet" href="app/impression/impression.css">
<link rel="stylesheet" href="app/information/information.css">
<link rel="stylesheet" href="app/main/main.css">
<link rel="stylesheet" href="app/shop/shop.css">
<link rel="stylesheet" href="app/turnament/turnament.css">
<link rel="stylesheet" href="components/modal/modal.css">
<!-- endinjector -->
<!-- endbuild -->
</head>
I whould like it to look like this
<head>
...
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css" />
<!-- endbower -->
...
</head>
EDIT
bower_component/mdi/bower.json
{
"name": "mdi",
"version": "1.1.70",
"main": [
"css/materialdesignicons.css",
"fonts/*",
"css/*",
"scss/*",
"package.json",
"preview.html"
],
"homepage": "http://materialdesignicons.com",
"authors": [
{ "name": "Austin Andrews", "homepage": "http://templarian.com" },
{ "name": "Google", "homepage": "http://www.google.com/design" }
],
"license": ["OFL-1.1", "MIT"],
"ignore": [
"*.md",
"*.json"
],
"keywords": [
"material",
"design",
"icons",
"webfont"
]
}
/bower.json
{
"name": "lunorth",
"version": "0.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-route": ">=1.2.*",
"angular-bootstrap": "~0.11.0",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.6.0",
"angular-animate": "~1.4.2"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
}
}
It looks like you're missing Material Design Icons from the list of dependencies in your projects bower.json file.
If you add the name and version to your dependencies it will fix your issue.
"dependencies": {
"mdi": "1.1.70",
...,
...
}
If you installed the package via the command line you can use --save to add it to your project dependencies.
Another common problem with wiredep is the missing package's bower.json file is missing the 'main' property.
I'm editing the entire post to show the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" href="./jQuery/jQueryUI/css/ui-darkness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./jQuery/jQueryUI/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
$(function() {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<br/><br/><br/>
<div id="LoginLinkSearch" class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<br/><br/><br/>
</body>
</html>
I was experiencing problems in other browsers, but I believe this is due to me using a bad CSS file for the jqueryUI.
Looks like you are using zoom (i can see something similar only in this case), try ctrl+0