I have some problem with ng-select css, my dropdown panel color is transparent (normally default color is white) on Chrome and Firefox.
html
<ng-select class="custom"[items]="mesurePoints2"
bindLabel="name"
bindValue="name"
[ngModel]="actualMesurePoint.name"
name="name"
(ngModelChange)="mesurePointSelection($event)"
>
</ng-select>
css
.ng-select.custom {
border:1px solid rgba(0, 0, 0, 0.15);
height: 38px;
border-radius: 0.25rem;
background-color: white;
font-size: 1rem;
padding: 0.5rem 0.75rem;
font-family: sans-serif;
}
.ng-select.custom .ng-option {
background-color: red;
}
component
#Component({
selector: 'app-traffic-data',
templateUrl: './traffic-data.component.html',
styleUrls: ['./traffic-data.component.scss', '../../../app.disabled.scss',
'../../../../../node_modules/#ng-select/ng-select/themes/default.theme.css'],
You need to use encapsulation in order to override children component's css:
#Component({
selector: 'app-traffic-data',
templateUrl: './traffic-data.component.html',
styleUrls: ['./traffic-data.component.scss', '../../../app.disabled.scss',
'../../../../../node_modules/#ng-select/ng-select/themes/default.theme.css'],
encapsulation: ViewEncapsulation.None
})
Example stackbiltz here.
The encapsulation solution did not work for me. But using adding the appendTo="body" attribute to the ng-select worked like magic for me.
You can refer to this issue thread on ng-select library for more details.
Related
I have a form that contains something like the following:
<div class="form-field">
<input-component [tabIndex]="tabData.tabEnable"></input-component>
</div>
<div class="form-field">
<input [tabIndex]="tabData.tabEnable" matInput cgiPrecision type="number"/>
</div>
In the css I have this:
input:focus {
border: $border-width solid $darkblue
}
but the border only shows on the input element and not the input-component component which has an input wrapped inside of it. How can I get the input:focus to work for the custom angular component as well?
Your custom component should listen for the focus event, then focus the input.
#Component({
selector: 'custom-input',
template: `<input #myInput type="text" [(ngModel)]="innerValue">`,
styles: [`
input {border: 5px solid green; }
input:focus { border: 5px solid blue; }
`]
})
export class CustomInputComponent implements ControlValueAccessor {
#ViewChild('myInput', {static: false}) inputCtrl;
//...functions to implement ControlValueAccessor
#HostListener('focus')
focusHandler() {
this.inputCtrl.nativeElement.focus();
}
}
Here's a stackblitz demonstrating.
scss files are limited to their angular component. If you want to use css globally, use the style.scss.
Another option is, integrate the scss into your child component with the style-urls array:
#Component({
selector: 'input-component',
templateUrl: '/input-component.html',
styleUrls: [
'./input-component.scss', // own scss file
'./../path-to-other-compontent.scss' // <--- here
]
})
export class InputComponent {
[...]
}
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
I have tried to change the background color for a
kendo-splitter-pane. However even if I add a style tag to it, it does not seem to apply to its inner elements.
What is then the appropriate way to customize the color for a kendo-splitter-pane?
You need to apply the background-color on the kendo-splitter-pane element, like this:
#Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane class="pane1">
<h3>Left pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Center pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane [resizable]="false">
<h3>Right pane</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
h3 {
font-size: 1.2em;
padding: 10px;
}
.pane1 {
background-color: red;
}
` ]
})
class AppComponent {}
I am currently working on angular materials using angular 7. How can we adjust the height of the mat-form-field-underline and hence further give a border around the select box.
<mat-form-field>
<mat-select>
<mat-option *ngFor="let type of types" [value]="type.value">{{type.viewValue}}</mat-option>
</mat-select>
</mat-form-field>
I tried giving css using:
.link-1 .mat-form-field-underline{
height: 0px !important;
}
Here the link-1 is the parent division. But I am not finding any difference.
Thank you.
Try the below. Basically you need to use ::ng-deep
// You can use /deep/ also
::ng-deep .mat-form-field-underline {
// background: red !important;
height: 0 !important;
}
In case, you are bothered about the deprecation warning, you can make the ViewEncapsulation to be None like below
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'form-example',
templateUrl: 'form-example.html',
styleUrls: ['form-example.css'],
encapsulation: ViewEncapsulation.None
})
.mat-form-field-underline {
height: 0 !important;
}
Ionic4 action sheet controller not taking up CSS.
This is my ts code
const actionSheet = await this.actionSheetController.create({
mode: 'md',
cssClass: 'match-item-action-sheet red',
buttons: [{ ...
}]
});
And here is my CSS class
.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.red{
color:red;
}
Here is the live code https://ionic-v4-xbwrsj.stackblitz.io/action-sheet
Below is the expected behavior with class match-item-action-sheet
Use ::ng-deep in css
See working code
::ng-deep .match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red{
color:red;
}
Edit!
According image you attach to question
Set style to .action-sheet-group.sc-ion-action-sheet-md
In css:
::ng-deep .match-item-action-sheet .action-sheet-group.sc-ion-action-sheet-md{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red .action-sheet-group.sc-ion-action-sheet-md{
color:red!important;
}
Write the following in your variables.scss:
.red {
--color: red;
}
And the following in your component's scss:
.action-sheet-group {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
The Action Sheet Buttons color is controlled by the below class .action-sheet-button.sc-ion-action-sheet-ios or you can verify it in the browser inspector.
If you need only change the delete section use this class .action-sheet-destructive.sc-ion-action-sheet-ios.
Add your styles that are needed to be modified and place it the variables.scss as I have done below.
.action-sheet-destructive.sc-ion-action-sheet-ios {
color: red;
}
Also, you have to change similarly to the relevant class in android.
const actionSheet = await this.actionSheetController.create({
mode: 'md',
css-class: 'match-item-action-sheet red',
}]
});
Try above code. Used css-class instead of cssClass.
Refer this for above issue.