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.
Related
How can I target the underlying html textarea of a vuetify v-textarea with css? In my case I want to change the line-height, font-family, color and more of the v-textarea. It doesn't work like this:
<v-textarea class="custom-textarea"></v-textarea>
.custom-textarea {
line-height: 1;
color: red;
}
I also tried several other selectors like v-textarea, .v-textarea, v-text-field__slot but none of these worked either. What is the right selector for the textarea?
In order to override a deep element, you need to access the element through deep selectors like
::v-deep .v-textarea textarea
More information about deep selectors
.custom-textarea textarea {
line-height: 1;
color: red;
}
Set id prop of text-area and apply css style by id.
<v-textarea id="input-7-2"></v-textarea>
#input-7-2 {
color:white;
background-color: green;
line-height:1;
}
Codepen demo
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 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>
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