I added a PrimeNG confirmation dialog (followed the example from the official doc):
component.html
<p-confirmDialog appendTo="body" #cd>
<p-footer>
<button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
<button type="button" pButton class="btn btn-default btn-normal ml-2" label="Skip" (click)="cd.reject()"></button>
</p-footer>
</p-confirmDialog>
component.ts:
import { ConfirmationService } from 'primeng/api';
#Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss'],
providers: [ConfirmationService]
})
constructor(private _confirmationService: ConfirmationService) { }
// I am trying to simplify the code
// this method is called successfully
this._confirmationService.confirm({
message: 'Please print or save the confirmation details before continuing.',
header: 'Confirmation details',
accept: () => {
this.navigatetoPaymentApp();
}
});
angular.json:
"styles": [
"node_modules/primeng/resources/primeng.min.css",
"src/styles/main.scss"
],
app.module.ts:
import {BrowserModule} from '#angular/platform-browser';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
//...
],
//...
})
export class AppModule { }
And I got this:
The expected result is like this:
Issues:
1. missing out-of-box styling from primeng (e.g. darken background)
2. missing close window cross icon
Is there anything missing?
Ideas?
Thanks in advance!
Eventually I found the issue. It's because the CSS styles are coming from the prime theme. e.g. add "node_modules/primeng/resources/themes/nova-light/theme.css" to angular.json for the styles list.
So I implemented the following classes with specific properties:
.ui-confirmdialog.ui-dialog {
width: 34em;
background-color: white;
& .ui-dialog-titlebar {
padding: .5em 0.667em;
font-family: xxx;
font-size: 1.3125rem;
font-weight: bold;
color: orange;
}
& .ui-dialog-content {
padding: 1em;
}
}
Additionally, I need to add this to darken the background (I drew some wisdom from the theme.css files from primeNG:
body .ui-widget-overlay {
background-color: #424242;
opacity: 0.7;
filter: alpha(opacity=70);
}
Note: the class ui-widget-overlay is pretty much empty if theme is not applied.
Related
I am trying to add custom class to ngbTooltip which is working fine on ng-bootstrap official documentation
ngBootstrap Link
I am trying to replicate the same in my code:
tooltip-test.component.html
<div class="row mt-5 ml-5">
<div class="col">
<button type="button" class="btn btn-primary" ngbTooltip="Tool tip on top" placement="top"
tooltipClass="my-custom-class">Tooltip</button>
</div>
</div>
tooltip-test.component.ts
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
import { NgbTooltipConfig } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-tooltip-test',
templateUrl: './tooltip-test.component.html',
styleUrls: ['./tooltip-test.component.css'],
providers: [NgbTooltipConfig],
// encapsulation: ViewEncapsulation.None
})
export class TooltipTestComponent implements OnInit {
constructor(tooltipConfig: NgbTooltipConfig) {
tooltipConfig.openDelay = 500;
tooltipConfig.tooltipClass = 'my-custom-class'
}
ngOnInit() {
}
}
tooltip-test.component.css
.my-custom-class .tooltip-inner {
background-color: darkgreen;
font-size: 125%;
}
.my-custom-class .arrow::before {
border-top-color: darkgreen;
}
But I want to achieve same without using encapsulation: ViewEncapsulation.None or ::ng-deep or :host in my code.
tooltipConfig.openDelay = 500; is working fine but
tooltipConfig.tooltipClass = 'my-custom-class' is not loading class.
I even tried tooltipClass="my-custom-class" in HTML.
Can anyone tell me where I am going wrong?
Stackblitz Link where code is not working
All you need is to understand what is view encapsulation in Angular. Here is a good article: https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
I am trying to style a React-Bootstrap form so that a few lists of checkboxes have properly outstanding headlines. I want the text "Frontend" "backend" "databases" etc to have a padding of about 10-20 pixels.
How it looks now:
This is not simple HTML/CSS, but what I would like to do is the equivalent of simply adding "padding: 10px" to the headlines "Frontend Frameworks, Frontend, Backend, Databases".
The first thing I tried was adding a CSS stylesheet using className="formLabel" with the style for .formLabel being: padding: 10px. But that doesn't actually push the other elements away as with regular CSS. Instead I get this:
(Border added to make it easier to see what's going on)
I tried adding style={{ paddingBottom: "10px" }} as well in the style of this thread. I also read the React Bootstrap Forms docs page but found no mention of how to style a <Form.Label> element.
So suppose you want to replicate what I've done in those images, see the code below:
// this code should nicely generate a "Homepage" component to use in React
import React, { Component } from "react";
import { Form } from "react-bootstrap";
import "./home.css";
class Homepage extends Component {
state = {
checked: [
{ vue: false, category: "framework" },
{ angular: false, category: "framework" },
{ react: false, category: "framework" },
{ html: false, category: "frontend" },
{ css: false, category: "frontend" },
{ javascript: false, category: "frontend" },
{ python: false, category: "backend" },
{ SQLite: false, category: "database" }
]
};
render() {
return (
// will generate the "framework" and "frontend" checkboxes
<Form>
<Form.Label className="formLabel">
Frontend Frameworks
</Form.Label>
{this.state.checked.map((obj, index) => {
let box = null;
if (obj.category === "framework") {
box = (
<Form.Check
inline
label={Object.keys(obj)[0]} // returns values like "vue"
type={"checkbox"}
id={index}
/>
);
}
return box;
})}
</Form>
<Form>
<Form.Label className="formLabel">Frontend</Form.Label>
{this.state.checked.map((obj, index) => {
let box = null;
if (obj.category === "frontend") {
box = (
<Form.Check
inline
label={Object.keys(obj)[0]} // returns values like "vue", "react"
type={"checkbox"}
id={index}
/>
);
}
return box;
})}
</Form>
)
}
export default Homepage;
// home.css
.formLabel {
font-size: 18px;
margin-bottom: 15px;
}
.testLabel {
font-size: 18px;
padding: 10px;
border: 1px solid black;
}
Try to add "display" to "formLabel" in your stylesheet.
It should be something like this:
.formLabel {
font-size: 18px;
margin-bottom: 15px;
padding: 20px;
display: inline-block;
}
I am a bit puzzled when following the documentation here. Everything seems to work other than the headerStyle attribute. It doesn't seem to be applying to styles that I apply to it. I'm not sure where I am going wrong.
Checking CodeSandbox from one of the examples provided headerStyle works. Where else can I check to understand what is causing this issue?
Localhost:
Codesandbox:
Not sure where your problem lies, as I'm not getting the same warning (when using headerStyle), but here's a working example -- make sure to import the ant design css, otherwise, the ant components won't work as intended. Also, I find it easier and cleaner to override ant's css via overriding their respective class names in a separate css file, rather than overriding styles -- especially when overriding more than css property.
index.js
import React, { Component } from "react";
import { render } from "react-dom";
import { Drawer, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";
class App extends Component {
state = { visible: false };
showDrawer = () => {
this.setState(prevState => ({
visible: !prevState.visible
}));
};
render() {
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.showDrawer}
visible={this.state.visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
);
}
}
render(<App />, document.getElementById("container"));
index.css
.ant-drawer-header {
background-color: #5340ff;
border-radius: 0;
}
.ant-drawer-title {
color: #fff;
}
.ant-drawer-body {
background-color: #5340ff;
color: #fff;
height: calc(100vh - 55px);
}
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.
I am using angular2/4's Ng2-Completer plugin and am having trouble with styling of the component. I want to change the background dropdown to "red" and the input box to be blue.
The following is my plunkr:
https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview
I tried to include the following CSS, but it does not appear to impact anything:
.completer-row {
display: inherit;
background:blue;
}
.completer-selected-row {
background-color: lightblue;
color: yellow;
}
.completer-row p {
position: relative;
top: 50%;
transform: translateY(50%);
}
.completer-dropdown-holder {
position: absolute;
background: red;
}
.customid {
background:blue;
}
My component:
import { Component } from '#angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
#Component({
selector: 'my-app',
styleUrls: [
'./app.component.css'
],
template: `<h1>Search color</h1>
<ng2-completer id="customid" [(ngModel)]="searchStr" [datasource]="searchData" [minSearchLength]="0" [clearSelected]="true" (selected)="onSelected($event)"></ng2-completer>
<p>Selected: {{selectedColor}}</p>
`
})
export class AppComponent {
protected searchStr: string;
protected dataService: CompleterData;
protected selectedColor: string;
protected searchData = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
protected onSelected(item: CompleterItem) {
this.selectedColor = item? item.title: "";
}
}
You can use inputClass propery of ng2-completer.
For example with bootstrap:
<ng2-completer [inputClass]="'form-control form-control-inline'" ...></ng2-completer>
You can style the angular ng2 completer like this:
::ng-deep .completer-row{
}
Angular 2 have a safety feature where CSS only work on HTML files of their respected component. Or css have to go in the global styles.css file for global use. However you can force CSS to apply by adding hots: >>> .class-name this method will force the css to apply to a child component.
More info on this thread Angular 2: How to style host element of the component?
https://alligator.io/angular/styles-between-components-angular/