I want to get rid of the header navigation on the material stepper. Please suggest how can I do it?
I tried setting the following css but didn't seems to work:
.mat-horizontal-stepper-header-container{display: none}
Here is stackblitz link of the stepper.
https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html
You need to use a combination of ::ng-deep to get around shadow DOM and the !important flag to get around Materials own stylings:
::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
#Simon K answer is correct. But it will affect all the stepper in your app. But if you want to use it for your specific component, use :host before the ::ng-deep. Then it will not affect other stepper (if any) in your application. For example of #Simon K' answer-
:host ::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
Extend CSS and use additional attribute on the element to hide just specific use-case of it.
mat-stepper[hide-header] .mat-horizontal-stepper-header-container {
display:none;
}
<mat-stepper hide-header orientation="horizontal" #stepper>
The below code is working for hide the mat stepper header.
:host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }
you can add this css property in <mat-horizontal-stepper #stepper> like this:
<mat-horizontal-stepper #stepper style="display: none;">
....
</mat-horizontal-stepper>
Related
My problem does not appear to be solvable by using traditional ways of conditional styling, like [ngStyle] or [ngClass]. I want to conditionally define a CSS-selector using :host ::ng-deep, for example:
<style *ngIf='preventXScroll'>
:host ::ng-deep .p-datatable-wrapper {overflow-x: hidden !important;}
</style>
But doing it this way always applies the style, regardless of the actual state of preventXScroll. Any ideas?
Actually, the problem can be solved via [ngClass].
Template:
<div class='outer-wrapper' [ngClass]='{"prevent-x-scroll": preventXScroll}'>
<p-table>
...
</p-table>
</div>
Stylesheet:
:host ::ng-deep .prevent-x-scroll .p-datatable-wrapper {
overflow-x: hidden !important;
}
This way the style is only applied to p-datatable-wrapper (within p-table child component) while it is contained in prevent-x-scroll.
Here's the Stackblitz.
I'm trying to apply the CSS color: blue to the div with class mat-button-toggle-label-content, but its not getting applied.
A similar CSS is getting successfully applied to a parent element called mat-button-toggle-group.
Just apply color to mat-button-toggle and keep it inside mat-button-toggle-group
Working stackblitz
mat-button-toggle-group {
background-color: orange;
mat-button-toggle {
color: blue;
}
}
You can apply the style to .mat-button-toggle-label-content but you need to break Encapsulation.
Component styles are encapsulated. You can't access component's styles(classes, ids) from outside of the component. You need to pierce into that component and inject the styles like below
Note: /deep/ is deprecated and no more recommended. So you can go with above approach. And for more details check Component Styles
mat-button-toggle-group {
background-color: orange;
/deep/ .mat-button-toggle-label-content {
color: blue;
}
}
There are many reason for that !
Your CSS may not be inserted properly into code
The order of material design CSS take over the order of CSS
My solution is that you may need to put !important after color: blue;
it is : color: blue !important;
Just move it to styles.scss and it will work Stackblitz.
I am not so into Angular and CSS and I have the following poblem trying to define a CSS related to a specific component (into the .css file of a component).
If I do in this way:
.p-column-title {
display: none;
}
it works fine. But if I do in this way (I obtained it from the PrimNG showcase example):
:host ::ng-deep {
.p-column-title {
display: none;
}
}
The CSS style is not applied.
Why? What is wrong? From what I have understand the :host ::ng-deep is used to let be global style the CSS role...so maybe it is not the correct way declare in this way into the CSS of a specific component.
I think that I am missing some piece...
I think you have to make it like this:
:host ::ng-deep .p-column-title{
display: none;
}
I am using ngx carousel in my angular project and want to disable navigation arrows .I have already tried following code but none worked
.carousel-control {
display: none;
}
it looks like my css is not able to override the ngx bootstrap css.
can anyone help me with this
try
::ng-deep .carousel-control {
display: none;
}
But FYI ng-deep is not a good way of doing things, ideally there is should be #Input field in that ngx carousel so you can configure navigation.
you can use
:host ::ng-deep {
.carousel-control {
display: none;
}
}
If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.
I have a component called accordion-next. This component can be see as a template. I have a component called accordion-toto. This second component is using accordion-next. it is a kind of a filler for the template.
if accordion-next was an interpolated string it would be:
`<a href>${content}</a>`
and accordion-toto would be:
content = "<div><div><span class="caret">▼</span></div></div>"
so accordion-toto will print
<a href><div><div><span class="caret">▼</span></div></div></a>
ok. Now, I want to add some scss to accordion-toto. This scss is
a:hover .caret,
{
color: red;
}
Of course it doesnt work. I try to use :host, :host-context, :host(:hover), :host-context(:hover) then /deep/ and a mixed of all of this. What case did I missed?
You can see the following Stackblitz for a complete example:
Stackblitz complete demo
Relate to: How to edit a ng-template to use my HTML?
Edit: I use to have rotate issue. Thank you #Shadowlauch for pointing it. My problem is still here with a 'basic' attribute.
You got the incorrect combinators. Try using the code below. You also need to set the display property to inline-block so that the rotation does work (it does not work on inline elements, as pointed by Shadowlauch's comment)
:host ::ng-deep [aria-expanded="true"] .caret,
{
display: inline-block;
transform: rotate(0deg);
}
:host ::ng-deep [aria-expanded="false"] .caret
{
display: inline-block;
transform: rotate(90deg);
}
Stackblitz demo
You need to use "display: block" for the span element in order to rotate, because span is an inline-element