In my Angular 4 project, I use ngClass on an object that has a CSS class applied with unset: all inside of it. I know that ngClass adds its properties, so the expected outcome is that all the values are unset and the style elements from ngClass are added. But this is not the case, now this is very annoying because the impact is big in my case:
<i [ngClass]="{'material-icons':true}" class="ignore-css" >chevron_right</i>
.ignore-css {
all: unset;
}
I need to unset previous CSS because I don't want the size and colors and so on... from the other icons on the page. But by all: unset; the arrow icon is not shown it just says chevron_right.
How can I unset previous CSS and get the icon?
Give it its library's default css values.
I suspect you also unset the font-family in the process.
You could add the !important keyword to the properties you have inside your material-icons class:
.material-icons{
attr: value !important;
}
This will override the unset.
Related
The height doesn't get bigger and the inscription gets smeared and not pretty
I have already tried many types of solutions but none of them worked I tried to do
::ng deep .mat-option{...}
But it didn't work
I tried to do
::ng-deep cdk-global-overlay-wrapper{
But that didn't work either
And I want to increase the height of
mat-option and it doesn't work
Assign a panel class for the mat-select, so that a custom class is available inside the overlay,
<mat-select panelClass="custom-select">
<mat-option>option1</mat-option>
<mat-option>option2</mat-option>
</mat-select>
then in the main styles file styles.css add css rules in the custom class to override the default styles
.mat-select-panel.custom-select .mat-option{
height: 50px;
}
I'm using a lib and i want to remove a property on a class. What is proper way to do it ?
Example :
Lib.css
div {
width: 100%;
}
and custom.css
div {
width: none; //something like that
}
Every rule in CSS has a different default value. Many might have none or auto as default. Check MDN for Reference. Search for 'Initial value'
Example
https://developer.mozilla.org/en-US/docs/Web/CSS/width
Initial value: auto
Edit
You can also use the special value initial, if you don't need to support MSIE browsers.
I encourage you to read about CSS specificity here in the docs:
CSS Specificity: Mozilla Developers and check my answer down below.
There are several ways to overwrite CSS properties from external libraries.
Case 1: if you're using Bootstrap or Zurb Foundation via npm package,
you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.
import 'files from library.sass';
// my settings
$default-width: 80%;
Case 2: if you're using CDN to deliver your library you can use a more specific CSS selector to overwrite given property eg:
to overwrite div selector
div {} ----> div.my-class {}
The second technique, but for sure not recommended is to use !important declaration. But remember, using !important declaration often causes many problems during the development process. It is always better to find a more specific selector than use !important.
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
This demo demonstrates my problem: http://jsbin.com/kuxuqa/3/edit?html,output
The background is being applied to both buttons, however the mixin is not being applied to the button that is part of a custom element. How can I declare a mixin that will apply to Button 2?
For some reason I was thinking I had to target paper-button in my selector. The solution to my example was:
#test {
--paper-button {
color: red;
}
}
The key is to avoid use of /deep/ and ::shadow (since those will reportedly be deprecated). You should target only light dom with your selectors, using mixins to apply custom styling for elements in shadow dom.
How can I select the likebtn container with CSS?
I have tried several combinations, for example "#meta #likebtn{}" or "#likebtn{}" and it did not work.
Why does this work?
First, you target it as direct as possible:
#likebtn {
/* desired style changes here */
}
Then open your developer tools and check the style inspector; if your CSS rules are being overridden somewhere it will tell you what selector was used to override it.
For instance, this could override your rule:
#meta #likebtn
The next step is to either:
declare your rule with the same selector after the earlier declaration or,
be more precise.