bootstrap | popular HTML , CSS , and JavaScript framework | Theme library
kandi X-RAY | bootstrap Summary
Support
Quality
Security
License
Reuse
- Create a new popper generator
- Checks if an option overlaps control placement .
- Flip the given argument .
- Map Typed styles .
- Computes the offsets of the reference
- Default overflow handler .
- Adds a custom event handler for the given element
- Effectively change styling
- Computes the popper style for each node
- Gets the composite rect of an element .
bootstrap Key Features
bootstrap Examples and Code Snippets
Trending Discussions on bootstrap
Trending Discussions on bootstrap
QUESTION
I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs
Command: git
Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
Directory: /home/runner/work/stackstream-fe/stackstream-fe
Output:
fatal: remote error:
The unauthenticated git protocol on port 9418 is no longer supported.
Upon investigation, it appears that below section in my yml file is causing the issue.
- name: Installing modules
run: yarn install
I have looked into this change log but can't seem to comprehend the issue.
Additional Details: Server: EC2 Instance Github actions steps:
steps:
- name: Checkout
uses: actions/checkout@v2
- id: vars
run: |
if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
- uses: pCYSl5EDgo/cat@master
id: slack
with:
path: .github/workflows/slack.txt
- name: Slack Start Notification
uses: 8398a7/action-slack@v3
env:
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
COLOR: good
STATUS: '`Started`'
with:
status: custom
fields: workflow,job,commit,repo,ref,author,took
custom_payload: |
${{ steps.slack.outputs.text }}
- name: Installing modules
env:
REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
run: yarn install
- name: Create Frontend Build
env:
REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
run: yarn build
- name: Deploy to Frontend Server DEV
if: ${{ contains(github.ref, 'dev') }}
uses: easingthemes/ssh-deploy@v2.1.5
env:
SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
ARGS: '-rltgoDzvO --delete'
SOURCE: 'deploy/'
REMOTE_HOST: ${{ secrets.DEV_HOST }}
REMOTE_USER: plyfolio-dev
TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
package.json file
{
"name": "stackstream-fe",
"version": "1.0.0",
"authors": [
"fayyaznofal@gmail.com"
],
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@fullcalendar/bootstrap": "^5.5.0",
"@fullcalendar/core": "^5.5.0",
"@fullcalendar/daygrid": "^5.5.0",
"@fullcalendar/interaction": "^5.5.0",
"@fullcalendar/react": "^5.5.0",
"@lourenci/react-kanban": "^2.1.0",
"@redux-saga/simple-saga-monitor": "^1.1.2",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
"@toast-ui/react-chart": "^1.0.2",
"@types/jest": "^26.0.14",
"@types/node": "^14.10.3",
"@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8",
"@vtaits/react-color-picker": "^0.1.1",
"apexcharts": "^3.23.1",
"availity-reactstrap-validation": "^2.7.0",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"axios-progress-bar": "^1.2.0",
"bootstrap": "^5.0.0-beta2",
"chart.js": "^2.9.4",
"chartist": "^0.11.4",
"classnames": "^2.2.6",
"components": "^0.1.0",
"dotenv": "^8.2.0",
"draft-js": "^0.11.7",
"echarts": "^4.9.0",
"echarts-for-react": "^2.0.16",
"firebase": "^8.2.3",
"google-maps-react": "^2.0.6",
"history": "^4.10.1",
"i": "^0.3.6",
"i18next": "^19.8.4",
"i18next-browser-languagedetector": "^6.0.1",
"jsonwebtoken": "^8.5.1",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"lodash.clonedeep": "^4.5.0",
"lodash.get": "^4.4.2",
"metismenujs": "^1.2.1",
"mkdirp": "^1.0.4",
"moment": "2.29.1",
"moment-timezone": "^0.5.32",
"nouislider-react": "^3.3.9",
"npm": "^7.6.3",
"prop-types": "^15.7.2",
"query-string": "^6.14.0",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-auth-code-input": "^1.0.0",
"react-avatar": "^3.10.0",
"react-bootstrap": "^1.5.0",
"react-bootstrap-editable": "^0.8.2",
"react-bootstrap-sweetalert": "^5.2.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
"react-chartist": "^0.14.3",
"react-chartjs-2": "^2.11.1",
"react-color": "^2.19.3",
"react-confirm-alert": "^2.7.0",
"react-content-loader": "^6.0.1",
"react-countdown": "^2.3.1",
"react-countup": "^4.3.3",
"react-cropper": "^2.1.4",
"react-data-table-component": "^6.11.8",
"react-date-picker": "^8.0.6",
"react-datepicker": "^3.4.1",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.5",
"react-drag-listview": "^0.1.8",
"react-drawer": "^1.3.4",
"react-dropzone": "^11.2.4",
"react-dual-listbox": "^2.0.0",
"react-facebook-login": "^4.1.1",
"react-flatpickr": "^3.10.6",
"react-google-login": "^5.2.2",
"react-hook-form": "^7.15.2",
"react-i18next": "^11.8.5",
"react-icons": "^4.2.0",
"react-image-lightbox": "^5.1.1",
"react-input-mask": "^2.0.4",
"react-jvectormap": "^0.0.16",
"react-leaflet": "^3.0.5",
"react-meta-tags": "^1.0.1",
"react-modal-video": "^1.2.6",
"react-notifications": "^1.7.2",
"react-number-format": "^4.7.3",
"react-perfect-scrollbar": "^1.5.8",
"react-rangeslider": "^2.2.0",
"react-rating": "^2.0.5",
"react-rating-tooltip": "^1.1.6",
"react-redux": "^7.2.1",
"react-responsive-carousel": "^3.2.11",
"react-router-dom": "^5.2.0",
"react-script": "^2.0.5",
"react-scripts": "3.4.3",
"react-select": "^4.3.1",
"react-sparklines": "^1.7.0",
"react-star-ratings": "^2.3.0",
"react-super-responsive-table": "^5.2.0",
"react-switch": "^6.0.0",
"react-table": "^7.6.3",
"react-toastify": "^7.0.3",
"react-toastr": "^3.0.0",
"react-twitter-auth": "0.0.13",
"reactstrap": "^8.8.1",
"recharts": "^2.0.8",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"sass": "^1.37.5",
"simplebar-react": "^2.3.0",
"styled": "^1.0.0",
"styled-components": "^5.2.1",
"toastr": "^2.1.4",
"typescript": "^4.0.2",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"@typescript-eslint/typescript-estree": "^4.15.2",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.2",
"husky": "^4.2.5",
"lint-staged": "^10.1.3",
"prettier": "^1.19.1",
"react-test-renderer": "^16.13.1",
"redux-devtools-extension": "^2.13.8",
"redux-mock-store": "^1.5.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && mv build ./deploy/build",
"build-local": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,ts,tsx}": [
"eslint --fix"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
ANSWER
Answered 2022-Mar-16 at 07:01First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".
January 11, 2022 Final brownout.
This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.
Second, check your package.json
dependencies for any git://
URL, as in this example, fixed in this PR.
As noted by Jörg W Mittag:
For GitHub Actions:There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".
Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.
The permanent shutdown is not until March 15th.
As in actions/checkout issue 14, you can add as a first step:
- name: Fix up git URLs
run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
That will change any git://github.com/
into https://github.com/
.
For all your repositories, you can set:
git config --global url."https://github.com/".insteadOf git://github.com/
You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.
So this (with the right key) would work:
git config --global url."git@github.com:".insteadOf git://github.com/
That will change any git://github.com/
(unencrypted Git protocol) into git@github.com:
(SSH URL).
QUESTION
I want to change bootstrap's default theme-colors with SASS , the problem is when I change a color and compile , it gives me invalid CSS value error.
I've read the docs and saw some tutorials on YouTube but I can't see where is the problem
I'm using bootstrap 5.1.0 , sass 3 this is my scss file:
@import "../../node_modules/bootstrap/scss/variables";
$theme-colors: (
"primary": //some color here,
);
@import "../../node_modules/bootstrap/scss/bootstrap";
and this is the error I get in terminal
PS F:\Coding\projects\sepehr\client\src\styles> sass style.scss custom.css
Error: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0,
"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid
CSS value.
╷
94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
│ ^^^^^^^^^^^^^
╵
ANSWER
Answered 2021-Aug-24 at 14:36You need to import functions and mixins too...
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
QUESTION
Our application kept showing the error in the title. The problem is very likely related to Webpack 5 polyfill and after going through a couple of solutions:
- Setting fallback + install with npm
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer/")
}
- Setting alias
alias: {
"buffer": "buffer",
"stream": "stream-browserify"
}
We are still seeing the dreadful error:
rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
at Object.4142 (rfc6979.js:3)
at r (bootstrap:19)
at Object.5892 (js.js:4)
at r (bootstrap:19)
at Object.4090 (bip32.js:5)
at r (bootstrap:19)
at Object.7786 (index.js:3)
at r (bootstrap:19)
at Object.1649 (MnemonicKey.js:50)
at r (bootstrap:19)
Our setup is vanilla NodeJS + TypeScript + Webpack for multi-target: node + browser. Any help would be great!
ANSWER
Answered 2021-Aug-10 at 08:15Answering my own question. Two things helped to resolve the issue:
- Adding plugins section with ProviderPlugin into webpack.config.js
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
// Work around for Buffer is undefined:
// https://github.com/webpack/changelog-v5/issues/10
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
- Also add in resolve.fallback into webpack.config.js:
resolve: {
extensions: [ '.ts', '.js' ],
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer")
}
},
QUESTION
I have just started a new project using Bootstrap 5 and I am trying to set up theme-colors with some custom values. However doing it the way that I have always done it is giving me some issues.
I have created three colors: $primary, $secondary, $tertiary. However if I add any classes such as bg-tertiary, then nothing changes as if it doesn't exist. bg-primary simply uses the default color defined by Bootstrap.
My code below:
@import "bootstrap/_functions";
@import "bootstrap/_variables";
$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"light": $light,
"dark": $dark,
);
@import "bootstrap/bootstrap";
If I change a default value such as "dark" to use $tertiary then any code within the scss file using $dark changes to use the value from $tertiary. Like below:
$theme-colors(
"dark": $tertiary
);
#pageFooter {
background: $dark; //This becomes #3fb247 the value from $tertiary
}
What am I doing wrong? I can't understand why the variables in the scss file are being affected by the change to $theme-colors, but classes are not.
Edit:
Using chrome inspector I can see that .bg-primary uses a css variable --bs-primary-rgb. Looking at the available variables --bs-primary has changed to the color that I have set, but not --bs-primary-rgb.
How can I have this variable be changed. Should it be done automatically?
With further research these rgb variables appear to have been introduced in Bootstrap 5.1. I can't find much information about how to get the variable to update to my set values probably because it is too new. So I have chosen to revert back to 5.0.2 and everything is now working as I expect it to.
ANSWER
Answered 2021-Aug-12 at 10:19If you want to override the bootstrap's variabvles, you do not need to use the following code.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"light": $light,
"dark": $dark,
);
This is enough. And these colors are overriden wherever they are used.
$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;
If you want to override $dark
, do this:
$dark: $tertiary;
QUESTION
I have webpack-cli installed on my laravel project. I don't know why first of all we need it to run my vue app but this is causing an error:
When I run npm run dev or npm run hot
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object. (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
]
}
Vue is installed also vue-loader, can't understand why it can't find those files. Also, I looked at the node_modules everything is in there ...
ANSWER
Answered 2021-Dec-20 at 09:04You need to update your vue-loader
npm update vue-loader
And if it is not installed, install it
npm i vue-loader
QUESTION
I'm trying to connect my app with a firebase db, but I receive 4 error messages on app.module.ts:
'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
here is my package.json file:
{
"name": "gescable",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/architect": "^0.1202.5",
"@angular-devkit/architect-cli": "^0.1202.5",
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/fire": "^7.0.4",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@ionic/angular": "^5.5.2",
"ajv": "^8.6.2",
"angularfire2": "^5.4.2",
"firebase": "^7.24.0",
"rxfire": "^6.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"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",
"typescript": "~4.2.4",
"@angular-devkit/architect": "^0.1200.0",
"firebase-tools": "^9.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"open": "^7.0.3",
"jsonc-parser": "^3.0.0"
},
"description": "An Ionic project"
}
And here is my app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientPageModule } from './client/client.module';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ClientPageModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireStorageModule,
AngularFireDatabaseModule
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
Here is my tsonfig.ts file
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"skipLibCheck": true
}
}
ANSWER
Answered 2021-Sep-10 at 12:47You need to add "compat" like this
import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
QUESTION
I want to create dark mode for a web site which use bootstrap. I have to add new root class which includes all boostrap colors. Here is my colors.scss:
$primary:#065FC6;
$secondary:#263C5C;
$success:#49C96D;
$danger:#FD7972;
$warning:#FF965D;
$light:#F8F8F8;
$body-color: #263C5C;
$custom-colors: (
"brd-default": $body-color
);
I want create new class like this:
:root.dark{
// override colors and classes for dark mode
$primary:#012345;
$secondary:#111111;
$success:#222222;
}
So how can i copy and paste all bootstrap colors for new color scheme?
If i can add colors, i will change HTML class so my root(color scheme) will be:
in my styles.scss:
@import "./colors";// custom colors
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
ANSWER
Answered 2021-Aug-07 at 20:32As explained here, there's no way to attach a class to :root
. However, you don't need this to achieve what you want.
Simply make a dark
class then you can add that as desired to the html or body tag.
Make all the needed theme color changes inside .dark{}, and then @import "bootstrap". When .dark
doesn't exist on the body, the theme colors will return to Bootstrap defaults.
@import "functions";
@import "variables";
@import "mixins";
.dark {
/* redefine theme colors for dark theme */
$primary: #012345;
$secondary: #111111;
$success: #222222;
$dark: #000;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"danger": $danger,
"info": $indigo,
"dark": $dark,
"light": $light,
);
/* redefine theme color variables */
@each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
}
/* redefine theme color rgb vars (used for bg- colors) */
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
@each $color, $value in $theme-colors-rgb {
--#{$variable-prefix}#{$color}-rgb: #{$value};
}
$body-color: #eeeeee;
$body-bg: #263C5C;
--#{$variable-prefix}body-color: #{$body-color};
--#{$variable-prefix}body-bg: #{$body-bg};
@import "bootstrap";
}
QUESTION
I'm wanting to use Bootstrap's "Floating Label" and "Input Group" components together. The trouble I'm having is that the label is hidden when the input is focused. In my code example below, I have these scenarios:
- Both components (see that the label disappears when clicking in the input).
- Floating label only
Does anyone know of a way to make these components work together?
Code 1
Code 4
ANSWER
Answered 2021-Aug-09 at 20:10Place the floating label inside another input-group
div.
Code 1
QUESTION
I'm build Django app, and it's work fine on my machine, but when I run inside docker container it's rest framework keep crashing, but when I comment any connection with rest framework it's work fine.
- My machine: Kali Linux 2021.3
- docker machine: Raspberry Pi 4 4gb
- docker container image: python:rc-alpine3.14
- python version on my machine: Python 3.9.7
- python version on container: Python 3.10.0rc2
error output:
Traceback (most recent call last):
File "/app/manage.py", line 22, in
main()
File "/app/manage.py", line 18, in main
execute_from_command_line(sys.argv)
File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 419, in execute_from_command_line
utility.execute()
File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 413, in execute
self.fetch_command(subcommand).run_from_argv(self.argv)
File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/test.py", line 23, in run_from_argv
super().run_from_argv(argv)
File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 354, in run_from_argv
self.execute(*args, **cmd_options)
File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 398, in execute
output = self.handle(*args, **options)
File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/test.py", line 55, in handle
failures = test_runner.run_tests(test_labels)
File "/usr/local/lib/python3.10/site-packages/django/test/runner.py", line 728, in run_tests
self.run_checks(databases)
File "/usr/local/lib/python3.10/site-packages/django/test/runner.py", line 665, in run_checks
call_command('check', verbosity=self.verbosity, databases=databases)
File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 181, in call_command
return command.execute(*args, **defaults)
File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 398, in execute
output = self.handle(*args, **options)
File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/check.py", line 63, in handle
self.check(
File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 419, in check
all_issues = checks.run_checks(
File "/usr/local/lib/python3.10/site-packages/django/core/checks/registry.py", line 76, in run_checks
new_errors = check(app_configs=app_configs, databases=databases)
File "/usr/local/lib/python3.10/site-packages/django/core/checks/urls.py", line 13, in check_url_config
return check_resolver(resolver)
File "/usr/local/lib/python3.10/site-packages/django/core/checks/urls.py", line 23, in check_resolver
return check_method()
File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 412, in check
for pattern in self.url_patterns:
File "/usr/local/lib/python3.10/site-packages/django/utils/functional.py", line 48, in __get__
res = instance.__dict__[self.name] = self.func(instance)
File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 598, in url_patterns
patterns = getattr(self.urlconf_module, "urlpatterns", self.urlconf_module)
File "/usr/local/lib/python3.10/site-packages/django/utils/functional.py", line 48, in __get__
res = instance.__dict__[self.name] = self.func(instance)
File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 591, in urlconf_module
return import_module(self.urlconf_name)
File "/usr/local/lib/python3.10/importlib/__init__.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1050, in _gcd_import
File "", line 1027, in _find_and_load
File "", line 1006, in _find_and_load_unlocked
File "", line 688, in _load_unlocked
File "", line 883, in exec_module
File "", line 241, in _call_with_frames_removed
File "/app/project/urls.py", line 24, in
path("", include("apps.urls", namespace="apps")),
File "/usr/local/lib/python3.10/site-packages/django/urls/conf.py", line 34, in include
urlconf_module = import_module(urlconf_module)
File "/usr/local/lib/python3.10/importlib/__init__.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1050, in _gcd_import
File "", line 1027, in _find_and_load
File "", line 1006, in _find_and_load_unlocked
File "", line 688, in _load_unlocked
File "", line 883, in exec_module
File "", line 241, in _call_with_frames_removed
File "/app/apps/urls.py", line 3, in
from . import api
File "/app/apps/api.py", line 1, in
from .serializers import *
File "/app/apps/serializers.py", line 1, in
from rest_framework import serializers
File "/usr/local/lib/python3.10/site-packages/rest_framework/serializers.py", line 27, in
from rest_framework.compat import postgres_fields
File "/usr/local/lib/python3.10/site-packages/rest_framework/compat.py", line 59, in
import requests
File "/usr/local/lib/python3.10/site-packages/requests/__init__.py", line 63, in
from . import utils
File "/usr/local/lib/python3.10/site-packages/requests/utils.py", line 27, in
from .cookies import RequestsCookieJar, cookiejar_from_dict
File "/usr/local/lib/python3.10/site-packages/requests/cookies.py", line 172, in
class RequestsCookieJar(cookielib.CookieJar, collections.MutableMapping):
AttributeError: module 'collections' has no attribute 'MutableMapping'
Dockerfile
FROM python:rc-alpine3.14
COPY . /app
WORKDIR /app
ENV UWSGI_PROFILE=core
ENV PYTHONUNBUFFERED=TRUE
RUN apk add --update --no-cache g++ gcc libxslt-dev # add some nessery libs
RUN apk add python3-dev build-base linux-headers pcre-dev
RUN pip3 install -U pip # upgrade pip
RUN apk update \
&& apk add --virtual build-deps gcc python3-dev musl-dev \
&& apk add jpeg-dev zlib-dev libjpeg \
&& pip install Pillow \
&& apk del build-deps
RUN apk add --no-cache --virtual=build-dependencies wget ca-certificates && \
wget "https://bootstrap.pypa.io/get-pip.py" -O /dev/stdout | python
RUN pip install uwsgi
RUN pip3 install -r requirements.txt # install all requirements
RUN python uploadstatics.py
EXPOSE 80
CMD ["gunicorn","project.wsgi:application", "-b 0.0.0.0:8060"]
NOTES:
- I use gunicorn to run the app (the error show even I run't from manage.py)
ANSWER
Answered 2022-Jan-07 at 19:13You can downgrade your Python version. That should solve your problem; if not, use collections.abc.Mapping
instead of the deprecated collections.Mapping
.
Refer here: Link
QUESTION
After migrating my angular 6 project to 12. I am getting multiple warning in terminal
if in angular.json i set optimisation: false configuration then all issue get resolved but i don't want to make this changes it should be true only.
with optimisation: true i am getting all these warnings:-
Earlier same code was working fine without any warning.
assets/.../variables.scss - Warning: Css Minimizer Plugin: > assets/.../variables.scss:6:0: warning: Unexpected "$"
6 │ $color-normal-gray:#8a8a8a;
╵ ^
assets/.../global.scss - Warning: Css Minimizer Plugin: >
assets/.../global.scss:285:2: warning: Expected identifier but found "."
285 │ .dropdown-menu{
╵ ^
assets/.../global.scss - Warning: Css Minimizer Plugin: >
assets/.../global.scss:255:6: warning: Expected identifier but found "*"
255 │ *background-color: #d9d9d9;
╵ ^
assets/.../master.scss - Warning: Css Minimizer Plugin: >
assets/.../master.scss:567:8: warning: Expected ":" but found "{"
567 │ circle {
╵ ^
My Package.json is below:
"dependencies": {
"@angular/animations": "^12.2.3",
"@angular/cdk": "^12.2.2",
"@angular/common": "^12.2.3",
"@angular/compiler": "^12.2.3",
"@angular/core": "^12.2.3",
"@angular/forms": "^12.2.3",
"@angular/http": "^7.2.16",
"@angular/material": "^12.2.3",
"@angular/platform-browser": "^12.2.3",
"@angular/platform-browser-dynamic": "^12.2.3",
"@angular/router": "^12.2.3",
"@fortawesome/fontawesome-free": "^5.15.4",
"@ngrx/store": "^6.1.0",
"@okta/okta-angular": "^3.0.1",
"@okta/okta-auth-js": "^4.7.1",
"angular-datatables": "^0.6.4",
"angular-image-slider": "0.0.8",
"autobind-decorator": "^2.4.0",
"bootstrap": "^4.6.0",
"core-js": "^2.5.4",
"file-saver": "^2.0.2",
"gulp-cli": "^2.3.0",
"json-bigint": "^1.0.0",
"jsrsasign": "^10.3.0",
"lodash": "4.17.10",
"ng-simple-slideshow": "^1.2.4",
"ng2-scroll-to-el": "^1.2.1",
"ng2-search-filter": "^0.4.7",
"ngx-filter-pipe": "^2.1.2",
"ngx-logger": "3.3.11",
"ngx-order-pipe": "^2.0.1",
"ngx-pagination": "^3.2.0",
"pagination": "file:src/app/packages/pagination-0.0.1.tgz",
"rxjs": "7.3.0",
"rxjs-compat": "^6.3.2",
"sass": "^1.36.0",
"single-spa": "^5.9.2",
"single-spa-angular": "^5.0.2",
"systemjs": "^6.8.3",
"true-case-path": "^1.0.3",
"tslint": "^6.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^12.1.1",
"@angular-devkit/build-angular": "^12.2.2",
"@angular-eslint/builder": "12.3.1",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/schematics": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",
"@angular/cli": "^12.2.2",
"@angular/compiler-cli": "^12.2.3",
"@angular/language-service": "^12.2.3",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@types/bootstrap": "^4.1.2",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.110",
"@types/node": "14.6.2",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"await": "^0.2.6",
"cheerio": "^1.0.0-rc.2",
"codelyzer": "~4.2.1",
"eslint": "^7.26.0",
"font-awesome": "^4.7.0",
"fs-promise": "^2.0.3",
"gulp": "^4.0.2",
"gulp-inline-css": "^3.3.0",
"gulp-inline-source": "^4.0.0",
"htmlhint-ng2": "0.0.13",
"husky": "^1.3.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.4",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"mediaquery-text": "1.0.7",
"ng-bullet": "^1.0.3",
"protractor": "^5.4.2",
"puppeteer": "^1.14.0",
"sonar-scanner": "^3.1.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"tslint-sonarts": "^1.9.0",
"typescript": "^4.3.5"
}
ANSWER
Answered 2021-Sep-08 at 10:30I had the same problem. You should change the import of 'assets/.../variables.scss' to './assets/.../variables.scss'. In my case it was in styles.scss but it can be in every .scss file.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install bootstrap
Download the latest release
Clone the repo: git clone https://github.com/twbs/bootstrap.git
Install with npm: npm install bootstrap
Install with yarn: yarn add bootstrap
Install with Composer: composer require twbs/bootstrap:5.1.3
Install with NuGet: CSS: Install-Package bootstrap Sass: Install-Package bootstrap.sass
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page