Modal is not opening properly.
below is the screen shot:screen shot
this is my package.json
"dependencies": {
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"": "^5.2.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0",
"angular4-slimscroll": "^1.0.5",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
have found below things which is causing the issue:
for my app when modal is opened there is no classes related to modal in the dom element. check below pic:
my example dom
while is demo in ng-bootstrap hosted example, dom element is as below:
dopm from ng-bootstrap modal demo
any help will be appreciated.
it works for me by applying this css class in style.scss file
.modal-open .modal
{
opacity: 1;
}
Related
Please help. Thanks in Advance
In .css file it shows
SyntaxError: unknown: Unexpected token (2:0)
1 | // Add your site styles here. Feel free to import!
2 | .titleBar {
| ^
and package.json is
{ "name": "pharmacy2u-technical-test", "version": "1.0.0",
"description": "A TV schedule viewer", "main": "./server.js",
"scripts": {
"run": "node ." }, "dependencies": {
"babel-plugin-react-css-modules": "^5.2.6",
"core-js": "^3.20.2",
"css-modulesify": "^0.28.0",
"express": "^4.17.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1" },
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/plugin-proposal-decorators": "^7.18.6",
"#babel/preset-env": "^7.16.8",
"#babel/preset-react": "^7.16.7",
"babel-plugin-css-modules-transform": "^1.6.2",
"browserify": "^17.0.0",
"sass": "^1.47.0",
"through2": "^4.0.2" } }
I got an error with trying to compile css
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'syntax')
Here is like the main css file looks looks like.
/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
*/
#import "tailwindcss/base";
/**
* Application styles
*/
/* Shared/Global */
#import "./shared/fonts.css";
#import "./shared/typography.css";
#import "./shared/global.css";
#import "./shared/grid.css";
#import './shared/vue-transitions.css';
#import './shared/cards.css';
#import './shared/forms.css';
#import './shared/pages.css';
/* Vendors */
#import "./vendors/simplebar.css";
#import "./vendors/vue-scrollbar.css";
/* Components */
#import "./components/button.css";
#import "./components/rte.css";
#import "./components/footer.css";
#import "./components/social-buttons.css";
#import "./components/navbar.css";
#import "./components/header.css";
#import "./components/breadcrumbs.css";
#import "./components/content-nav.css";
#import "./components/text.css";
#import "./components/text-image.css";
#import "./components/card.css";
#import "./components/crops.css";
#import './components/search-bar.css';
#import './components/custom-select.css';
#import './components/modal.css';
#import "./components/login.css";
#import "./components/download.css";
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins.
*/
#import "tailwindcss/components";
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
*/
#import "tailwindcss/utilities";
/**
* Use this directive to control where Tailwind injects the responsive
* variations of each utility.
*
* If omitted, Tailwind will append these classes to the very end of
* your stylesheet by default.
*/
#import "tailwindcss/screens";
what is strange compiler goes ok when all the imports except tailwind ones are commented. So this is definitely some issue with the css import.
and here package.json for some reference what is used in the project
{
"name": "sg",
"version": "1.0.0",
"description": "sg",
"main": "src/main.js",
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --open",
"startproxy": "cross-env webpack-dev-server --open --mode development --env.development --env.useProxy --env.proxyUrl",
"build": "cross-env NODE_ENV=build webpack",
"publish": "cross-env NODE_ENV=publish webpack",
"test": "jest"
},
"keywords": [],
"author": "TC",
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/preset-env": "^7.11.0",
"#vue/babel-preset-app": "^4.5.4",
"#vue/test-utils": "^1.0.4",
"autoprefixer": "^10.0.2",
"axios": "^0.23.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^25.5.1",
"babel-loader": "^7.1.5",
"clean-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^5.1.0",
"cross-env": "^6.0.3",
"css-loader": "^1.0.1",
"cssnano": "^4.1.10",
"dotenv-webpack": "^1.8.0",
"eslint": "^5.10.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
"file-loader": "^2.0.0",
"find-config": "^1.0.0",
"fs": "0.0.1-security",
"glob-all": "^3.2.1",
"html-loader": "^0.5.5",
"html-replace-webpack-plugin": "^2.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin": "^5.3.1",
"imagemin-webp": "^6.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"img-loader": "^3.0.0",
"jest": "^25.5.4",
"mini-css-extract-plugin": "^0.8.0",
"path": "^0.12.7",
"postcss": "^8.3.9",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-mixins": "^7.0.2",
"postcss-nested": "^5.0.1",
"postcss-simple-vars": "^6.0.2",
"purgecss-webpack-plugin": "^1.6.0",
"stylelint": "^13.6.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-webpack-plugin": "^1.2.3",
"url-loader": "^1.1.1",
"vue": "^2.6.12",
"vue-click-outside": "^1.1.0",
"vue-custom-scrollbar": "^1.4.1",
"vue-jest": "^3.0.6",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-fix-style-only-entries": "^0.4.0"
},
"dependencies": {
"#tailwindcss/typography": "^0.3.1",
"core-js": "^3.8.3",
"micromodal": "^0.4.10",
"regenerator-runtime": "^0.13.7",
"simplebar": "^5.3.6",
"tailwindcss": "^2.0.1",
"vuex": "^3.6.0"
}
}
any ideas?
downgrading to "postcss": "^8.2.1" solved the issue :)
I have used ngx-toastr module to show toastr in my angular application It is working fine with Chorme,Firefox but not working in IE ie it is working in ngOninit() function but not in any other function
.
import { ToastrModule } from 'ngx-toastr';
In my case, the toast container was being shown in DOM, but the toast itself wasn't being displayed.
(You can check if this is your case inspecting the DOM and looking for the text "toast-container", which the container div has).
I tried uncommenting polyfills lines and everything until I realized the toast was being set the property "display:none" for some reason by IE.
The thing that worked for me was just adding this to my styles.scss:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.toast {
display: block !important;
}
}
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
.toast {
display: block !important;
}
}
Hope this helps!
polyfills.ts
/**
This file includes polyfills needed by Angular and is loaded before the app.
You can add your own extra polyfills to this file.
*
This file is divided into 2 sections:
Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
Application imports. Files imported after ZoneJS that should be loaded before your main
file.
*
The current setup is for so-called "evergreen" browsers; the last versions of browsers that
automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
Web Animations #angular/platform-browser/animations
Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
import 'web-animations-js'; // Run npm install --save web-animations-js.
/**
By default, zone.js will patch all possible macroTask and DomEvents
user can disable parts of macroTask/DomEvents patch by setting following flags
*/
(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
with the following flag, it will bypass zone.js patch for IE/Edge
*/
(window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
APPLICATION IMPORTS
*/
// Add global to window, assigning the value of window itself.
(window as any)['global'] = window;
if (!Element.prototype.matches) {
Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
package.json
{
"name": "xtreme-admin-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "node patch-webpack.js"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.7",
"#angular/animations": "^7.0.1",
"#angular/common": "^7.0.1",
"#angular/compiler": "^7.0.1",
"#angular/core": "^7.0.1",
"#angular/forms": "^7.0.1",
"#angular/http": "^7.0.1",
"#angular/platform-browser": "^7.0.1",
"#angular/platform-browser-dynamic": "^7.0.1",
"#angular/router": "^7.0.1",
"#jaspero/ng-confirmations": "^0.4.7",
"#jaspero/ng2-confirmations": "^0.3.3",
"#ng-bootstrap/ng-bootstrap": "^3.3.1",
"#swimlane/ngx-charts": "^7.0.1",
"#swimlane/ngx-datatable": "^13.1.0",
"#types/crypto-js": "^3.1.43",
"angular-calendar": "^0.25.2",
"angular-datatables": "^6.0.0",
"angular2-notifications": "^2.0.0",
"bcryptjs": "^2.4.3",
"bootstrap": "^4.1.3",
"c3": "^0.4.23",
"chart.js": "^2.8.0",
"chartist": "^0.11.3",
"classlist.js": "^1.1.20150312",
"compression": "^1.7.4",
"core-js": "^2.6.9",
"critical": "^1.3.6",
"crypto-js": "^3.1.9-1",
"d3": "^4.8.0",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"express": "^4.17.1",
"express-simple-cdn": "^1.0.1",
"jquery": "^3.4.1",
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.2.4",
"karma-html-reporter": "^0.2.7",
"karma-phantomjs-launcher": "^1.0.4",
"karma-teamcity-reporter": "^1.1.0",
"ng-chartist": "^1.1.1",
"ng2-charts": "^1.6.0",
"ng2-dragula": "^1.5.0",
"ng2-file-upload": "^1.3.0",
"ng2-smart-table": "1.2.2",
"ngx-loading": "^3.0.1",
"ngx-owl-carousel": "^2.0.7",
"ngx-owl-carousel-o": "^2.0.1",
"ngx-pagination": "^4.1.0",
"ngx-perfect-scrollbar": "6.1.0",
"ngx-quill": "^3.6.0",
"ngx-slick-carousel": "^0.4.6",
"ngx-spinner": "^7.2.0",
"ngx-toastr": "^8.7.3",
"ngx-tooltip": "0.0.9",
"node-sass": "^4.12.0",
"owl.carousel": "^2.3.4",
"pace-js": "^1.0.2",
"quill": "^1.3.6",
"remove-node-modules": "^1.7.6",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.2",
"script-loader": "^0.7.2",
"slick-carousel": "^1.8.1",
"web-animations-js": "^2.3.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-builders/custom-webpack": "^8.2.0",
"#angular-devkit/build-angular": "^0.10.7",
"#angular/cli": "~7.0.3",
"#angular/compiler-cli": "^7.0.1",
"#angular/language-service": "^7.0.1",
"#types/c3": "^0.6.4",
"#types/chartist": "^0.9.46",
"#types/datatables.net": "^1.10.17",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.22",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"css-aspect-ratio": "^1.0.5",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "3.1.6"
},
"browser": {
"crypto": false,
"stream": false
}
}
I am using react-static and I also want to use sass.
This is my package.json:
"dependencies": {
"#reach/router": "^1.2.1",
"axios": "^0.19.0",
"bulma": "^0.8.0",
"bulma-start": "^0.0.3",
"node-sass": "^4.13.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-icons": "^3.8.0",
"react-router-dom": "^5.1.2",
"react-slick": "^0.25.2",
"react-static": "^7.2.0",
"react-static-plugin-reach-router": "^7.2.0",
"react-static-plugin-sass": "^7.2.2",
"react-static-plugin-sitemap": "^7.2.0",
"react-static-plugin-source-filesystem": "^7.2.0",
"slick-carousel": "^1.8.1"
}
As I know, to use sass add node-sass and import SCSS file.
But it doesn't work.
It looks like they have a plugin on SASS integration. Follow their installation and after that you can import your SASS files.
you can use webpack for this.
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
}
add this in your "rules" array under "module" object.
I have a meteor app that follows this file structure, https://guide.meteor.com/structure.html#example-app-structure.
In /client/main.js my code looks like this
import '/imports/startup/client';
console.log("this ran in client/main.js");
When I run meteor, the log shows, however, when I start the service with meteor --production, the log does not show.
Any idea or headings would be greatly appreciated!
FYI: This is a meteor react app with server-side rendering. Here is my package.json if it helps.
{
"dependencies": {
"#babel/runtime": "^7.0.0-beta.54",
"autoprefixer": "^7.1.6",
"aws-sdk": "^2.282.1",
"bcrypt": "^1.0.3",
"core-js": "^2.5.1",
"desandro-matches-selector": "^2.0.2",
"ev-emitter": "^1.1.1",
"fizzy-ui-utils": "^2.0.7",
"get-size": "^2.0.3",
"history": "^4.7.2",
"jquery": "^3.3.1",
"marked": "^0.3.19",
"meteor-node-stubs": "~0.2.11",
"moment": "^2.21.0",
"outlayer": "^2.1.1",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.5",
"react-helmet": "^5.2.0",
"react-markdown": "^3.3.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"s-grid": "^1.2.1"
},
"devDependencies": {}
}
Just to close this question, I believe my usage of --production flag is not correct in evaluating why client's logs are not shown in prod vs --production vs local.