I'm using a ngx-bootstrap 'alert' component. And I'd like to style the alert message, but adding the styles to the compnents .css file doesn't do anything.
question - ngx-bootstrap says to style do this below but I'd like to know if it can be done from the component .css file?
https://valor-software.com/ngx-bootstrap/#/alerts#local-styling
styles: [
`
:host >>> .alert-md-local {
background-color: #009688;
border-color: #00695C;
color: #fff;
}
`
]
ex.
.alert {
border-radius: 0px !important; // doesn't do anything
margin-bottom: 0px !important; // doesn't do anything
}
<alert [type]="alert.type" [dismissible]="dismissible" [dismissOnTimeout]="alert.timeout" class="text-center" style="margin-bottom: 0px;">{{ alert.msg }}</alert>
You can use ng-deep for this. Though it is mentioned in the docs that it will be deprecated soon, there's a lot of discussion going on about a good alternate solution for the same. Here's the GitHub issue.
For now, ng-deep still works.
:host ::ng-deep .alert {
border-radius: 0px;
margin-bottom: 0px;
}
Related
I'm using snackbar in my Angular 9 project but some reason I'm getting the same background and text color for action button. I added css style in the component.scss file and also global style.scss file but still not working.
this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!',
{ duration: 5000, panelClass: "blue-snackbar"}).onAction().subscribe(() => {})
I also tried like this
panelClass: ['my-snack-bar', 'button-bar']}
I also add this in styles.scss and component.scss file but still not working
.my-snack-bar {
background-color: #E8EAF6;
color: red;
}
.button-bar {
background-color: pink;
color: blue;
}
example
Not sure why it's happening..any suggestion or help will be really appreciated.
In your global styles file, usually styles.scss you need to target the panelClass property, something like this:
.my-snack-bar {
background: #2196F3;
button {background:white; color: blue}
}
Here's a working example https://stackblitz.com/edit/angular-stacb4-b1fuu5
I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not succeed. May be the syntax I am using is wrong. I want to decrease the height of my text field. This is my text field
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
and my css
#textBox{
text-transform: none;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: #fff;
--mdc-text-field-hover-line-color: #f5f5f5;
--mwc-text-width: 100%;
width:100%;
}
The default css applied is
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
background-color: rgb(245, 245, 245);
}
.mdc-text-field {
display: flex;
width: 100%;
}
.mdc-text-field {
height: 56px;
display: inline-flex;
position: relative;
box-sizing: border-box;
will-change: opacity, transform, color;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.mdc-text-field {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
label {
cursor: default;
}
<style>
#textfield {
width: var(--text-field-width,80%);
height: 100%;
position: absolute;
left: 0;
top: -12px;
text-transform: capitalize;
--mwc-text-width: 100%;
}
<style>
mwc-textfield {
--mdc-theme-primary: transparent;
--mdc-text-field-ink-color: black;
--mdc-text-field-fill-color: transparent;
--mdc-text-field-disabled-fill-color: transparent;
}
The default height applied to the text field is 56px. What I have tried is
#textbox.mdc-text-field--height{
height:45px;
}
and
#textbox.mdc-text-field--height('45px');
and also added mixin in the node modules file as height:var(--mdc-text-field-height,56px);
and used in css as
#textBox{
--mdc-text-field-height:45px;
}
Any help would be greatly appreciated! Thanks in advance.
Material design components vs Material web components
I have read the documentations related to this version. In this documentation, I have found that we can add mixin for height.
The first thing to note here is that there are two different libraries of material components: the one you are referring to is MDC (Material Design Components, distributed on npm as #material/<component>) which is a SASS+JS implementation of Material components. The other one is MWC (Material Web Components, distributed as #material/mwc-<component>), a collection of actual WebComponents based on the former library. So keep in mind that the documentation refers to the MDC counterpart of the MWC component you're actually using (<mwc-textfield>).
Styling from the outside
What you're trying to do here
#textbox.mdc-text-field--height {
height: 45px;
}
doesn't work mainly because selecting inside a custom element's shadow root is not possible (at least, not anymore); also, the element responsible for the height is the <label>, whose class is .mdc-text-field.
The querySelector way
The quickest way to change the height that comes to my mind is this:
import { LitElement, html, property, customElement, css, query } from 'lit-element';
import '#material/mwc-textfield';
#customElement('my-component')
export class MyComponent extends LitElement {
// Select the text field
#query('mwc-textfield') textField;
async firstUpdated() {
// Wait for its dom to be ready
await this.textField.updateComplete;
// Programmatically select the label
// and change the height
this.textField
.shadowRoot
.querySelector('.mdc-text-field')
.style
.height = '45px';
}
render() {
return html`<mwc-textfield></mwc-textfield>`;
}
}
however I would really not recommend it: performance and elegance aside, it'll probably break some of mwc-textfield features such as the floating label.
The extension way
You can also enforce the height by extending TextField and overriding the styles:
import {LitElement, html, customElement, css} from 'lit-element';
import {TextField} from '#material/mwc-textfield/mwc-textfield';
#customElement('my-textfield')
export class MyTextfield extends TextField {
static styles = [TextField.styles, css`
.mdc-text-field {
height: 45px;
}
`];
}
// Then use <my-textfield> instead of <mwc-textfield>
but again, like the above, use at your own risk...
Using the mixin
I guess for now the only way of using the height mixin is building a customised version of TextField which more or less goes like this:
clone the mwc repo (yeah, it's a monorepo so you get all the other components as well, but I'm pretty sure you can delete all the ones not imported by mwc-textfield)
npm install
in packages/mwc-textfield/src/mwc-textfield.scss use the mixin:
#include mixins.height(45px);
probably around here
npm run build
copy the mwc-textfield folder and paste it in your project (delete the source files, npm pack may be handy for this), then change the imports from #material/mwc-textfield to ./path/to/custom-textfield
Certainly too much work for changing a height... The good news is MWC is still in development and it cannot be excluded that they'll add a CSS custom property or some other way to customise the height. Also, the new density concepts are being implemented in MWC (sadly not yet in TextField), which could be just what you need.
There is also an open issue about this, let's see what they say
I am trying to modify the primeng p-calendar, but it is not working properly.
For example:
I want it to be like this:required changes
But original it looks like this:original image
What i have tried so far:
HTML
<div class="nxui-form-group">
<label for="planEndDate">
<img src="assets/images/calendar.svg" class="nxui-icon-small nxui-icon-align-bottom">
{{ 'i18n.all-damage-reports.label.plan-end-date' | translate }}
</label>
<p-calendar formControlName="planEndDate"
class="calendar-control"
id= "planEndDate"
[title]="'i18n.all-damage-reports.label.plan-end-date' | translate"
[dateFormat]="'i18n.common.dateformat.shortdate-p-calendar' | translate"
[locale]="'i18n.common.dateformat.calendar' | translate"
></p-calendar>
</div>
CSS
p-calendar.calendar-control {
opacity: 1;
color: black;
background: #eeeeee;
}
looking forward to inputs.
Thanks
I think that you should use the special selectors of angular to change a component style like :host or ::ng-need, you can check that in the official documentation:
https://angular.io/guide/component-styles
::ng-deep body .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
margin: 0;
padding: 0;
line-height: 1;
color: goldenrod;
}
::ng-deep .ui-datepicker .ui-datepicker-group {
background-color: cadetblue;
}
Hope that'll help you !
In my case, I want to style the calendar icon, html is below
<div class="main-container">
<p-calendar showTime="true" hourFormat="12" [showIcon]="true"></p-calendar>
</div>
Then I added style below but it is not working:
.main-container ::ng-deep .ui-datepicker-trigger.ui-button {
// add style here
}
Then I added p-calendar after ::ng-deep it worked
.main-container ::ng-deep p-calendar .ui-datepicker-trigger.ui-button {
// add style here
}
Did you try to change the styling classes?
See https://www.primefaces.org/primeng/#/calendar (section styling)
Like for example
.ui-calendar .ui-inputtext {
// place text styling here
}
Select element class via using Inspect then add ::ng-deep selector to force style on child components
::ng-deep .ui-inputtext {
/* Example */
opacity: 1 !important;
}
The code you see in the templates is not what actually is in browser's DOM. There are some other elements injected, like <input> for text input.
Try something like
p-calendar.calendar-control input {
border: 1px solid black;
background: #eeeeee;
}
And anyway, look at the actual elements in your browser with Inspect Element and write CSS according to the real situation.
I'm new Angular, CSS and Html.
I have used MatTabsModule(import { MatTabsModule } from '#angular/material/tabs';) to create tabs but I'm able to adjust/change height, background etc. In short I'm not able to override default properties of MatTabsModule's classes. Please help me.
Below is my CSS and Html code. I hope Typescript code is not needed.
HTML: -
<mat-card>
<mat-card-content>
<mat-tab-group class="tab-group" dynamicHeight>
<mat-tab *ngFor="let obj of tags">
<ng-template mat-tab-label>{{ obj.name }}</ng-template>
<div class="tab-content">
{{ obj.name }}
</div>
</mat-tab>
</mat-tab-group>
</mat-card-content>
CSS: -
.tab-group {
border: 1px solid #e8e8e8;
margin-bottom: 30px;
.unicorn-dark-theme & {
border-color: #464646;
}
}
.tab-content {
padding: 16px;
}
mat-card{
padding: 0px;
}
.mat-tab-label .mat-ripple {
min-width: 0;
height: 30px;
}
I'm not able to change height width background colour of these tabs.. :(
You cannot access the styles of child components from your css-file as the ViewEncapsulation.Emulated prevents styles from leaking to the rest of the app (as it should, don't change it).
If you use the ng-deep-selector like this: :host ::ng-deep mat-tab { ... } you can override default material styles that cannot be configured in any other way. I say that because making css leak from a component is considered a bad practice and if possible you should use #Input to pass on styles.
By the way, the :host is there so the styles leak only to this components children and not to the rest of the app
To override default style of angular material elements you need to prefix ::ng-deep in CSS style.
This is how you can control height and width of tabs
::ng-deep .mat-tab-label{
height: 27px !important;
min-height: 0px!important;
margin: 3px!important;
}
In my polymer project , i use a vaadin-combobox in two page like this:
- page1: i create a custom combobox style file and import to my page:
<link rel="import" href="../elements/base/vaadin-text-field-custom-radius-theme.html">
content of this file:
<dom-module id="vaadin-text-field-custom-radius-theme" theme-for="vaadin-text-field">
<template>
<style>
[part="input-field"] {
border-radius: 2px;
background-color: white;
border: 1px solid #808080;
height: 100%;
font-family: "Roboto", sans-serif !important;
color: #4c4c4c !important;
padding-left: 10px;
font-size: 14px;
box-sizing: border-box;
max-height: 100%;
background-color: transparent;
background-image: none !important;
}
[part="value"] {
border: 0px !important;
box-shadow: none !important;
height: 100%;
box-sizing: border-box;
max-height: 100%;
background-color: transparent;
text-align: var(--cmb-align,left);
}
.vaadin-text-field {
height: 100%;
box-sizing: border-box;
max-height: 100%;
}
.vaadin-text-field-container {
height: 100%;
box-sizing: border-box;
max-height: 100%;
}
#media(max-width:1024px){
[part="input-field"] {
font-size: 12px !important;
padding-left: 5px;
}
[part="value"] {
font-size: 12px !important;
}
}
</style>
</template>
In page2 ,I have another custom style file with some other css properties.
I use
this.set('route.path',"/page2")
to redirect from page1 to page2 and then use
this.set('route.path',"/page1")
in page2 to return page1.
At this time my combobox in page1 is styled by css defined in custom file that i have imported to page 2 ( while i expected it's still styled by css in vaadin-text-field-custom-radius-theme.html").
Can some one tell me why?
p/s:I tried implement the suggestion of Anton Platonov, but i found that if my page 2 don't import any custom style file, When i return from page2 to page1, the default style of vaadin-text-field that defined in ..\bower_components\vaadin-text-field\vaadin-text-field.html is used for my combobox instead of my vaadin-text-field-custom-radius-theme.html.
If i remove style default in vaadin-text-field.html, my combobox revice css from browser's default style, still not my vaadin-text-field-custom-radius-theme.html.
It's treated like my vaadin-text-field-custom-radius-theme no longer exists.
And if i refesh my page 1, everything become normal.
this is my combobox code:
<vaadin-combo-box-light style="width:100%;height:30px" id="cmdCompanyName" class="fix-size combobox" label="" allow-custom-value items='[[companies]]'
value="" item-label-path="name" item-value-path="id" attr-for-selected="id" on-keyup="searchData"
on-custom-value-set="searchData2" on-value-changed="searchData2">
<vaadin-text-field style="width:100%;height:30px;" class="cmb-text-field" maxlength="150">
<iron-icon class="prefix" icon="icons:search" slot="prefix"></iron-icon>
<iron-icon class="suffix toggle-button" slot="suffix" icon="icons:expand-more"></iron-icon>
</vaadin-text-field>
</vaadin-combo-box-light>
I assume, your project is a Single Page Application, and you use <app-route>/<iron-pages> or a similar routing. This way the browser actually uses a single real document, which is then manipulated to achieve "pages" and navigation.
Due to technical limitations, theme style modules for Vaadin components are not dynamic in the way you expect. Once themes and components are loaded and initialised, their styles become memoized in the classes of their corresponding components.
Suppose you load "page2" first. After loading, <vaadin-text-field> memoizes its styles, and more theme modules can be applied. That is why when you navigate to "page1", <vaadin-text-field> will continue using the memoized style from "page2".
This means, you have to use same set styles in all the instances of, e. g.,
<vaadin-text-field>, in the document. Therefore, you have to use other means to make them look differently, instead of swapping styles. Here are some options.
Scoping :host() selectors
Prefix all the custom theme styles with a scoping :host() selector, for example:
<dom-module id="my-text-field" theme-for="vaadin-text-field">
<template>
<style>
:host(.no-radius) [part="input-field"] {
border-radius: 0;
}
</style>
</template>
</dom-module>
Then use in the html:
<h3>Default appearance</h3>
<vaadin-text-field></vaadin-text-field>
<h3>No-radius class</h3>
<vaadin-text-field class="no-radius"></vaadin-text-field>
Custom CSS properties
Define a custom CSS property in the <vaadin-text-field>’s parent DOM scope, e. g., in a page component:
<dom-module id="page-1">
<template>
<style>
:host {
--custom-radius: 4px;
}
</style>
<vaadin-text-field></vaadin-text-field>
</template>
</dom-module>
<script>
Polymer({is: 'page-1'});
</script>
You can also define some other value for the main document scope:
<custom-style>
<style>
html {
--custom-radius: 0;
}
</style>
</custom-style>
Use the defined custom CSS property in the theme style module for <vaadin-text-field>:
<dom-module id="my-text-field" theme-for="vaadin-text-field">
<template>
<style>
[part="input-field"] {
border-radius: var(--custom-radius);
}
</style>
</template>
</dom-module>
Then see the results:
<h3>Main document appearance:</h3>
<vaadin-text-field></vaadin-text-field>
<h3>Page 1 appearance:</h3>
<page-1></page-1>
See also: https://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module