Styling a library component once it's been packaged? - javascript

How do we style library packaged component from via styles.scss?
For example suppose we have a <hello-component> and the template looks like this:
<div><h1 class="fs-HelloHeading">Hello!</h1><div>
How can be override the CSS inside fs-HelloHeading class and do it in a way that is context sensitive?
So for example if <hello-component> is inside <party-component> then it should have a yellow background, but if it's inside funeral-component then it should have a black background, and we would set these by overriding the styles in fs-HelloComponent. Thoughts?
My end goal is to override classes that are packaged with a component. For example I have these packaged with an Angular Material Table Component.
.mat-header-cell {
justify-content: left;
white-space: nowrap;
min-width: 12rem;
}
.mat-cell {
justify-content: left;
white-space: nowrap;
min-width: 12rem;
}
However I may want to change the width from outside the component later in a specific context, so I was thinking about doing that by adding additional css classes to the mat-row-element.

It is possible to override a style with the !important keyword. from top to bottom, the last !important will be applied. To set individual stylings depending on the surrounding element you can just 'mimic' the DOM-structure. Here is an example what you can put just on the end of the SCSS-file.
party-component {
hello-component {
background-color: yellow !important;
}
}
funeral-component {
hello-component {
background-color: black !important;
}
}
Please note that you have to replace colors and component-names with actual values.

Just try to define another custom selector with more or equal specificity to your CSS selectors.
if any rule is overridden,then you need to use !important flag to force your custom css rules, also consider that when you are using bootstrap, then some utilities classes have !important attribute.
<h1 id="custom-id" class="fs-HelloHeading">Hello {{ name }}!</h1>
style.css:
#custom-id {
color: blue;
}

you may want to use :host and ::ng-deep like
:host ::ng-deep .fs-HelloHeading { // in party-component css file
background-color: yellow;
}
:host ::ng-deep .fs-HelloHeading { // in funeral-component css file
background-color: black ;
}
it will look for all the child elements of these components
for more detail. Here's the docs: https://blog.angular-university.io/angular-host-context/

Related

Add more elements in CSS style

I am trying to develop something where I need this requirement, I tried a couple of things, but not able to do it.
There is one style - A:
.someClass {
padding-right:10px;
}
now I want to add margin also in same class like - B:
.someClass {
margin-left:10px;
}
Now I need both, padding and margin. The thing is I can't modify A as it set by some third party JS, which doesn't reside locally.
So, is there any way I can achieve this by Pure CSS or JS (NO Jquery)
There is one style - A:
.someClass {
padding-right: 10px;
}
No, that is not a "style". That is a "rule". It says to apply padding-right to elements with the someClass class.
Now you add another rule:
.someClass {
margin-left: 10px;
}
That says to apply margin-left to elements with the someClass class.
Together the two rules do exactly what you want. The key point is that CSS will apply all rules whose "selectors" (here, the .someClass part) match the element in question. If the two rules contain the same properties, then there are ways (involving concepts such as "precedence" and "specificity") in which CSS will choose which one to apply, but that is not the case here, so both padding-right and margin-left will be applied to elements with the someClass class.
You can put both margin and padding into the element at once:
.someClass{
margin: 10px;
padding: 10px;
}
Also if the margin or anything else is set by like you said third party JS you can Override it in CSS by adding: !important so your code would look like this:
.someClass{
margin: 10px !important;
padding: 10px !important;
}
According to your question you need only padding to override.
Hope i understood your Question and could help.

How to override icon class after plugin is loaded?

I am using dhtmlxTreeview: https://dhtmlx.com/docs/products/dhtmlxTreeView/
I need to override an icon that is in a CSS file. If I go to the CSS file and override class, it is updated in the browser.
But when I run the first time and the pluging reloads again, the plugin doesn't respect the CSS override even if I use the !important keyword.
How can I override that icon file?
I need to change this:
i.dhxtreeview_icon.dhxtreeview_icon_file {
background-image:url(imgs/dhxtreeview_web/icon_file.gif);
}
To this:
i.dhxtreeview_icon.dhxtreeview_icon_file {
background-image:url(imgs/dhxtreeview_web/icon_folder_closed.gif) !important;
}
You will have to link your CSS file after the library's. This will make CSS's native specificity override the library's styles with yours.
Example: https://jsfiddle.net/zk4t2t8a/
<style>
div {
background: red;
}
</style>
<style>
div {
background: green;
}
</style>
<div>
Test
</div>
More information: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Deactivate "element.style" in css/html?

I see this css code in the "style" tab of the Chrome developer tools window:
element.style {
height: auto;
width: 100%;
margin-top: -148px;
}
I want to overwrite it with this css code in my .css file:
.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto;
height: 244px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
But the style definitions of the element.style is already there.
I cant find the .js so fast.
Can someone help me?
Thx
What you see in the chrome developer window as element style is the styles on a element which are written inline
element.style {
/*this all are the inline written styles*/
}
Now coming to the point But with this codes the element.style is allready there you are not able to overwrite the styles because of the CSS Priorities. In this scenario the rule is Inline CSS has more priority than external CSS
So what can you do??
You have to either remove the inline css where ever its written. That way your external css will apply
If you cannot modify the inline CSS for some reason then only option is to set the styles as !important in your external CSS files. People here have already mentioned this solution, But this is not always recommended.
Take all the Inline CSS written on that element and create a new class in your external file and then put it there, Now give this class name to the element. So the original styles are applied back. Now comes the point to your new Styles that you have to override. Also the new CSS priority rule when using 2 classes. CSS rule which is read last (in the css file, not the order you put in the element) will have priority. So make sure you place the new CSS rule below the other class you just created as mentioned above.
What if you have to use 2 separate files to write these 2 classes?? Then comes one more CSS priority rule. The file that is placed last in the DOM will have the priority (remember its not when the file is loaded into the DOM, its about where its placed in the DOM)
you can add !important to end of every styles.
for example use this:
height: 244px !important;
instead of
height: 244px;
You can always go with:
.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto !important;
height: 244px !important;
margin-top: 0px !important;
margin-left: auto;
margin-right: auto;
}
Important styles will overwrite inline styles, unless inline styles also have !important clause (but this is rare actually).
Sure, you can remove the style attribute on the element:
element.removeAttribute('style');
If the element.style is gone, your CSS file's rules will be visible.

Internal CSS not override external CSS (api google)... why?

I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
why ???
thanks!
EDIT
the result page is created by google cse and is added in my div.. this the code created:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
Here there is a part of my code:
http://jsfiddle.net/2rg86vm6/1/
is only a part so doesn't work ;)
The answer to "Why isn't my CSS being applied?" is almost always that some other style definition is overriding it. When this happens, it can be frustrating, but don't despair: There are only 2 things you need to know:
Understand selector strength and CSS specificity.
Know how to use your browser's developer tools.
CSS Specificity and selector strength
The "selector" is the part of your style definition that targets (or "selects") your element. It's the code that comes before the curly braces in your CSS:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
The above snippet represents a single CSS rule. The selector for the above rule is .gs-results.
Selector strength is important when you have two rules that match a single element and the styles conflict:
.a { color: blue; }
p { color: red; }
<p class="a">Am I red or am I blue?</p>
In the above example, the text is blue because a class selector has a higher specificity than an element selector. If you wanted to force the text red, you could strengthen your p selector by adding the class to it:
.a { color: blue; }
p.a { color: red; }
<p class="a">Am I red or am I blue?</p>
Now the text will be red because a selector consisting of element and class has a higher specificity than just a class selector. We can make in blue again, by increasing the specificity of the first selector. For example, specifying an ancestor class:
.x .a { color: blue; }
p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Further reading:
CSS Standard: Calculating specificity The algorithm is actually quite simple.
CSS Specificity calculator
Finding conflicting selectors
Understanding specificity is vital, but only helpful if you know the style rule that is overriding your own. Fortunately, every browser comes with excellent developer tools that make discovering applied rules a breeze.
In any browser, right click the element whose styles are not being applied as you expected, and choose "Inspect Element". This will open the developer tools with the DOM inspector open and the clicked element selected. You may have to manually select a parent or child element of the one that is selected. Once you have the correct element selected, look at the rules that are being applied. You should see yours in the list with the style properties in strikethrough:
If your particular element has a lot of style rules applied and you are having trouble finding the CSS property you care about, try the "Computed" tab. Additionally, Chrome let's you filter the styles displayed by entering the property you are interested in where it says "Filter...". IE let's you filter the computed tab.
Now that you have identified what rule is overriding your styles, you can see how you need to strengthen your selector. This should not be a difficult thing. We will get our text back to red by borrowing from the other rule's selector:
.x .a { color: blue; }
.x p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Why not just use !important?
Stephanie Rewis's tweet says it best:
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
It causes maintenance headaches. If this is code you will ever need to maintain, you will hate yourself later for using !important. If other devs need to maintain it, they will hate you.
Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing (better way is to strenghten your selector):
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000 !important;
text-decoration: none !important;
display: none !important;
}

Defining custom css styles for html tags

I don't do CSS and I'm not even sure what this is called so excuse the ignorance :-)
.examples {
}
.examples b {
font-weight: bold;
}
.examples p {
margin-top: 0.9em;
margin-bottom: 0.9em;
}
I'm assuming the above means any b or p tags inside a <div class='examples'> will use the styling from .examples and anything custom defined for b or p?
Can I create my own style using that convention, like this?
.examples mystyle {
}
<div class='examples'>
<div class='mystyle'>
...
UPDATE:
I want mystyle to use examples styling, but override with a black bottom border. Using .examples .mystyle the bottom border appears outside examples div, but with .examples mystyle the enclosing div looks good, but the bottom black border is gone. My apologies, so it's not working either way.
http://jsfiddle.net/SAFX/5ft9W/
Since you are using a class on the tag it would need to be a class selector and the element must be a child of .examples:
/* Notice the `.` on mystyle */
.examples .mystyle {
}
<div class="examples">
<div class='mystyle'></div>
</div>
There are several parts to a CSS style:
.examples .mystyle { /* selector */
font-weight: bold; /* This entire line is a declaration consisting of a property & value*/
}
What you seem to be asking about is the terminology to describe child elements inheritance of style from an ancestor; this is the 'cascade' of 'Cascading Style Sheets.' Not all elements inherit from their parents/ancestors (a links, notably, do not inherit the color property by default, though specifying color: inherit; in their css declaration can make them do so).
If you're asking about how to refer to the list of selectors that determine which elements are targeted by a particular rule, that is the 'selector', or 'selector expression.'
References:
CSS (from the Mozilla Developer Network, 'MDN').
Introduction to CSS 2.1 (from the W3C).
Selectors, Level 3 (from the W3C).

Categories