<mat-slide-toggle>Slide Me!</mat-slide-toggle>
How to increase length of the toggle-thumb-icon,is it possible to customise the toggle-thumb-icon to the end of the bar?
You can do with the simple style
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(32px,0,0) !important;
}
STACKBLITZ DEMO
Related
I want to remove underline of Date Picker.
By using inspect I did it but its not working by css. How can I do it by css
::ng-deep{
&.mdc-line-ripple::after{
border-bottom-style:none !important ;
}
}
You are using regular CSS. Try to use:
::ng-deep .mdc-line-ripple::after {
border-bottom-width: 0 !important;
}
See more:
Nesting CSS classes
Is it possible to show the next step directly after clicking continue within the Vuetify Stepper? (or in other words: how to remove the transition slide out effect)
It doesn't look like there is any provided option to change the transition effect in the Vue component itself.
But, you can disable it by setting the transition css property to none for the .stepper-content elements.
For example, you could create a no-transition class:
.no-transition .stepper__content { transition: none; }
And then add it to the <v-stepper> component tag:
<v-stepper v-model="e1" class="no-transition">
...
</v-stepper>
Here's a codepen with a working example.
Mine worked with
.no-transition .v-stepper__content { transition: none; }
In case somebody didn’t succeed with #thanksd's answer.
This worked for me:
.v-stepper__wrapper {
transition:none !important;
}
Vuetify version 2.2.8
Remove the Vuetify stepper transition:
.v-stepper__content, .v-overlay {
transition: none !important;
}
Remove the Vuetify stepper transition only from stepper-header (which I was looking for). I added a class "stepper-body" to :
.stepper-body {
position: relative;
}
Trying to change the background of material.angular.io mat-card globally.
I added the below to styles.css and it does not work.
mat-card {
background:pink
}
You just need to add a period in front of your css rule:
.mat-card {
background: pink;
}
Here is a StackBlitz to play with it using a forked example from the Angular Material site.
How could we change the progress bar colour in Primeng. In the progress bar documentation it lists down
ui-progressbar-value
as the Element whose width changes according to value.
But when in the CSS when I set
.ui-progressbar-value {
background-color: #ef5439;
}
It does not change anything. Infact I don't see any color.
Any help would be appreciated.
First add your own unique class in your progress bar like below
class="customProgress" and then try to override it in your scss or css file.
Hope it will work
<p-progressBar class="customProgress" [value]="value"></p-progressBar>
.customProgress .ui-progressbar .ui-progressbar-label {
color: yellow;
}
.customProgress .ui-progressbar .ui-progressbar-value {
background: red;
}
I achieved the result with the following configuration:
HTML
<p-progressBar [value]="progressValue"
[ngClass]="'customProgress'">
</p-progressBar>
In the CSS file, this is what you have to add:
::ng-deep .customProgress .ui-progressbar .ui-progressbar-value {
background: #ef5439;
}
The above solutions did not work for with primeng 11. I achieved the result in this way
`<p-progressBar [value]="progressValue" class="customProgress"></p-progressBar> `
and with theming property CSS
::ng-deep .customProgress .p-progressbar-label {
background: #ef5439;
color: #fff;
}
In angular prime ng components use below method of style to change progress bar color
<p-progressBar [style]="{'background':'red'}"></p-progressBar>
I want to override .btn (and btn-success, btn-info, etc, etc) so that ALL of the background gradient is gone (keep the shadow).
.btn{
//what goes here to remove the background gradient?
//must work with the other colors
}
This should do it for you.
.btn {
background-image:none;
}