I have a carousel running with Slick and Jquery,
there's overriding style for the slicks dots (defined in the component)
However when running on localhost I can't see the slicks dots receive the CSS, it just loaded from the default slick css.
I checked the internal stylesheet rendered on the web: the default slick.css & slick-theme.css loaded before the component's css so it's supposed the component should have overridden the style but it's not working ?
Here is what I export in Angular.json
"styles": [
"src/styles.scss",
"node_modules/bulma/css/bulma.min.css",
"node_modules/slick-carousel/slick/slick-theme.css",
"node_modules/slick-carousel/slick/slick.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
],
In my component SCSS:
#import "../../shared_scss/mixin.scss";
#import "../../shared_scss/variables.scss";
/* Slider */
.carousel{
background-size: cover;
height: auto;
margin-top: 50px;
margin-bottom: 0 !important;
.carousel_item{
&:hover{
cursor: pointer;
}
}
.slick-dots{
bottom: 40px;
li button:before{
font-size: 20px;
}
li.slick-active button:before {
opacity: .75;
color: $neon-green;
}
}
}
// responsive homepage carousel
#include breakpoint(xs){
.carousel{
margin-top: 40px;
.slick-dots{
bottom: 5px
}
}
}
My component ts file :
import { Component, OnInit, AfterViewInit } from '#angular/core';
import * as $ from 'jquery';
import 'slick-carousel';
#Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit, AfterViewInit {
ngAfterViewInit(): void {
// Slick carousel
$('.carousel').slick({
slidesToShow: 1,
adaptiveHeight: true,
arrows: false,
dots: true,
infinite: true,
speed: 300
});
}
constructor() { }
ngOnInit() {
}
}
Can you change the order of css/scss files angular.json as follow
"styles": [
"node_modules/bulma/css/bulma.min.css",
"node_modules/slick-carousel/slick/slick-theme.css",
"node_modules/slick-carousel/slick/slick.css",
"src/styles.scss",
],
and instead of applying style in component level, put the style inside style.scss, which will apply globally. Hence it will override the plugin style.
Related
I have a sidebar component which take the sidebarExpanded state from Input(). Whenever the input changes, the animation is triggered correctly but the width change appears instantly. The same animation code is working in another component, so is not a common import problem. The problem persists in different browsers. What am I missing here?
Thank you.
sidebar.component.ts
import {
animate,
state,
style,
transition,
trigger,
} from '#angular/animations';
import { Component, Input, OnInit } from '#angular/core';
#Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
animations: [
trigger('collapse', [
state('false', style({ width: '0' })),
state('true', style({ width: '25rem' })),
transition('false <=> true', animate(1000)),
]),
],
})
export class SidebarComponent implements OnInit {
constructor() {}
#Input() sidebarExpanded = true;
ngOnInit(): void {}
}
sidebar.component.html
<div class="sidebar" [#collapse]="sidebarExpanded"></div>
sidebar.component.scss
.sidebar {
display: flex;
flex-direction: column;
position: fixed;
top: 8rem;
bottom: 0;
background-color: var(--color-grey-dark-4);
box-shadow: var(--shadow-dark);
}
I figured out i had placed the animation both on the div containing the sidebar and on the sidebar itself. Removing the animation from the parent div solved my problem.
in an Angular application I have a component with <ng-content></ng-content>. I added the scss rules for content that will be put inside the ng-content, but they are ignored. I tried to solve using :host, but it doesn't work.
https://stackblitz.com/edit/angular-ewqhzj
Wrapper component:
<app-embed>
<p>Hello world!</p><h1 class="toBeColored">toBeColored</h1>
</app-embed>
Styles in embed component:
:host {
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink;
}
}
The problem is that the pink color of 'toBeColored' string is not set
Try this
:host ::ng-deep{
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink !important;
}
}
and remove encapsulation statement and try ti build
encapsulation: ViewEncapsulation.Native
Try adding encapsulation: ViewEncapsulation.Native to your embed component like
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-embed',
templateUrl: './embed.component.html',
styleUrls: ['./embed.component.scss'],
encapsulation: ViewEncapsulation.Native
})
export class EmbedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
You can't achieve that with a clean way.
A workaround would be to create global css :
:host {
...;
::ng-deep .toBeColored {
color: pink;
}
}
But it will be deprecated. See this issue
::ng-deep is going to hold the web record for long-lived deprecated API.
You should be able to apply the styles in the parent component that projects the content into the ng-content tag. The angular styles isolation appears to consider the content to be part of the component where the HTML is declared.
https://stackblitz.com/edit/angular-ivy-q9dn68
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/
How do I dynamically change CSS properties of a component host?
I have a component and in it's CSS I have given it a stlye:
:host {
overflow-x: hidden
}
On a button click from child component, I need to add overflow-y: hidden to the host component.
How do I achieve this behavior?
Here is a working example.
Use the following HostBinding:
#HostBinding('style.overflow-y') overflowY = 'scroll';
This would give the following component:
#Component({
selector: 'my-app',
template: `
<div>
<button (click)="addStyle()">Add Style</button>
<h2>Hello</h2>
</div>`, styles: [
`
:host {
overflow-x: hidden;
height: 50px;
width: 200px;
display: block;
}
`,
],
})
export class App {
name: string;
#HostBinding('style.overflow-y')
overflowY = 'scroll';
constructor() {
}
addStyle() {
this.overflowY = 'hidden';
}
}