I am using angular 7 and primeng library for UI compnents. CSS is not getting applied to the HTML elements. I have imported these css files in angular.json:
"styles": [
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.scss"
]
On the demo page: http://primefaces.org/primeng/#/inputgroup
Input box have these classes generated: ui-inputtext ui-corner-all ui-state-default ui-widget
These are missing from my generated html, if i apply these classes manually css gets applied. This is HTML code:
<h3 class="first">Addons</h3>
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="pi pi-user" style="line-height: 1.25;"></i></span>
<input type="text" pInputText placeholder="Username">
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">$</span>
<input type="text" pInputText placeholder="Price">
<span class="ui-inputgroup-addon">.00</span>
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">www</span>
<input type="text" pInputText placeholder="Website">
</div>
</div>
</div>
I have tried ViewEncapsulation:
import { ViewEncapsulation } from '#angular/core';
#Component({
..
encapsulation: ViewEncapsulation.None
})
There is no change in app.module.ts for primeng.
As Per My Example You need to change in app.module.ts file
See below Images
You need to import InputTextModule from primeng in root module of your component
And here is the angular.json file
if you find this helpfull...
I had the same problem, then I tried to put the css files into my styles.css instead of angular.json and it works fine now
change this...(angular.json)
"styles": [
"src/styles.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
by this...(src/styles.scss):
#import '~primeng/resources/primeng.min.css';
#import '~primeng/resources/themes/bootstrap4-light-blue/theme.css';
#import '~primeicons/primeicons.css';
When you install primeng-lts
Add to below styles to angular.json
"styles": [
"./node_modules/primeng-lts/resources/themes/nova-light/theme.css",
"./node_modules/primeng-lts/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
Related
I have several components of Website A (e.g., a customized form) built in Bootstrap. I have Website B build in Docusaurus. Now, I would like to copy these components to Website B. As Bootstrap and Docusaurus have conflict in general. I'm thinking if it is possible to limit the css of Bootstrap to certain components.
For instance, initially, I have a form in a page myForm.mdx.md in Website B:
---
id: 'MyForm'
title: 'MyForm'
sidebar_label: 'MyForm'
---
import MyForm from '../src/components/MyForm';
Page containing MyForm
<MyForm>
</MyForm>
I tried to add <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" ... ... /></Head> to the component of Website A to build src/components/MyForm/index.jsx of Website B:
class MyForm extends React.Component {
constructor(props) {
super(props)
this.state = { successMessage: null }
}
componentDidMount() {}
submit(e) {
this.setState({ successMessage: true })
}
render() {
return (
<>
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</Head>
<div className="container--fluid container">
<div className="row">
<div className="col">
<form
method="post"
action="https://www.mywebsite.com/download"
onSubmit={this.submit.bind(this)}
>
<div className="row">
<div className="col-lg-6 pt-3">
<div className="form-group">
<input
className="form-control"
placeholder="First name*"
name="firstname"
required
/>
</div>
</div>
<div className="col-lg-6 pt-3">
<div className="form-group">
<input
className="form-control"
placeholder="Last name*"
name="lastname"
required
/>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12 pt-3">
<div className="form-group">
{this.state.successMessage ? (
<div className="alert alert--success">
Thanks for downloading
</div>
) : (
<button
type="submit"
className="btn btnGreen form-control"
style={{background : "var(--ifm-color-primary-darker)" , border:"1px solid var(--ifm-color-primary-darker)" , color: "#fff"}}
>
Download
</button>
)}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</>
)
}
}
export default MyForm
The display of Website B shows that the form does have the Bootstrap style. However, we can see the conflicts in other parts (or children components) of website B: sidebar, navigations, etc.
So does anyone know if it is possible to only apply the css of Bootstrap to the component MyForm?
No, you'll have to override any "problems" caused by Bootstrap with CSS applied AFTER bootstrap.css.
I'm using the react-day-picker library to have a calendar in my react form but the input is not following the bootstrap styles of the "form-control" className, and I want the input has the same size of the top inputs as the image
<div className="form-group">
<div className="row">
<label className="text-light col-lg-12" htmlFor="fecha">Nacimiento</label>
</div>
<DayPickerInput id="fecha" inputProps={{ className: 'form-control' }} value={this.selectedDay} onDayChange={this.handleDayChange}/>
</div>
I need to create a dropdown button, so I installed bootstrap and ng-boostrap. This is my html:
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
and in my app.module.ts I put:
imports:{
NgbModule.forRoot()}
I have just also put bootstrap css in my angular.json file.
The problem is that dropdown appear grey like it doesn't have css. I don't know what is the problem. Anyone can help me?
EDIT
My angular.json file have this:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css"
],
Step 1) install #ng-bootstrap/ng-bootstrap
npm install --save #ng-bootstrap/ng-bootstrap
Step 2) Import the ng-bootstrap package in app.module.ts file
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
...
imports: [NgbModule, ...],
...
})
export class AppModule {
}
Note: No need of doing NgbModule.forRoot()
Step 3) Use your html code in app.component.html file
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
I have created the same example, which is forked from the ng-bootstrap.
View Demo
Hope this will help you.
I solved this problem by adding line:
#import '~bootstrap/dist/css/bootstrap.min.css'
to my /src/styles.css file.
(You need have bootstrap or bootstrap-css-only installed. To install run command npm install bootstrap-css-only --save)
I have done the intsallation of foundation 6 on my Angular and it works fine but I realized the grid system is not working at all. I have made a lot of tweaks and turns but still no luck. Anyone knows why this may be. Thank you.
<div>
<h3>
Add A Warehouse
</h3>
</div>
<form novalidate [formGroup]= "warehouseForm" (ngSubmit)="onSubmitForm()">
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Name
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Name">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse Country
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Country">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Region
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Region">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse City
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse City">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Address
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Address">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse Street
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Street">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns end">
<label>Warehouse Keeper
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Keeper">
</label>
</div>
</div>
<div>
<button type="submit" class="success button expanded">Save</button>
</div>
</form>
This is my form , I can say I say my foundation works because the fonts and other things are working. But the grid is just not working.
In the .angular-cli.json
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/foundation-sites/dist/css/foundation.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": [
"../node_modules/foundation-sites/vendor/jquery/dist/jquery.js",
"../node_modules/foundation-sites/dist/js/foundation.js"
],
Image from code inspection
I think the issue is with the version of foundation you've got!
Check what grid system your current install of Foundation is using because the newest version of Foundation comes with their XY Grid enabled when you download the complete package and this wont call the CSS of the old grid!
You'll need to re-download a custom version of Foundation but check 'float grid' when you're downloading it and it will get you back to the older grid system and your code should work!
Heres a link to download the custom foundation version:
https://foundation.zurb.com/sites/download/
And if you want to learn more about the new XY Grid heres a link: http://foundation.zurb.com/sites/docs/xy-grid.html
Hope this helps!
In case anyone else has an issue with using Foundation Flex Grid:
Try adding these in your styles.scss:(you could read more from here)
#import "../node_modules/foundation-sites/assets/foundation";
#include foundation-flex-classes;
#include foundation-flex-grid;
If that did work, here's how I add foundation to my Angular 8 project:
Install foundation sites and jQuery:
$ npm install --save foundation-sites jquery
Add these in angular.json file:
"styles": [
"src/styles.scss",
"node_modules/foundation-sites/dist/css/foundation.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/foundation-sites/dist/js/foundation.min.js"
],
Add $ and foundation in app.component.ts
-
import { Component } from '#angular/core';
declare var $: any; // <=========== Add this
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app-frontend';
ngOnInit(): void {
$(document).foundation(); // <=========== Add this
}
}
Ctrl C and npm start or ng serve again to reset the server.
I'm currently working on an application using Angular2.
Now that I finished my styling of the app, I want to make more themes to switch between.
I've tried setting my styleUrls to a variable and change it on click, but this doesn't work.
let styles= nightflat
#Component({
selector: 'start-app',
template: `
<div class="ui-g ui-g-nopad">
<div class="ui-g-12 ui-g-nopad" id="header">
<img src="../src/resources/icon/c2logo.png" alt="Logo" id="logo">
<button pButton icon="fa-sign-out" id="LogOut" type="button" label="LogOut" (click)="gotoLogout()"></button>
<h1></h1>
</div>
<div class="ui-g-12 ui-g-nopad">
<p-breadcrumb [model]="bcitems"></p-breadcrumb>
</div>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-2 ui-g-nopad">
<p-panelMenu id="menu" [model]="itempanel"></p-panelMenu>
</div>
<div class="ui-g-10 ui-g-nopad" id="router-outlet">
<router-outlet> </router-outlet>
<div class="ui-g-12 ui-g-nopad">
<button pButton id="goBack" type="button" label="Zurück" (click)="goBack()"></button>
</div>
</div>
</div>
</div>
`
,
styleUrls: [styles],
directives: [Button],
providers: []
})
"nightflat" is an import from my style-urls.ts providing a css-path for every style I want to use (til now only 2):
export var nightflat = './dist/resources/scss/app.component.css'
export var froggy = './dist/resources/scss/test.component.css'
I then tried to use a function called by a Buttonclickevent to set the styles variable to another value.
setStyle(){
styles = froggy;
}
Well, that doesn't work at all.
First question: As I'm using gulp-inject - do I have to inject ALL of the style-sheets into my index.html?
Second question: How am I supposed to switch theming onclick?