css is being ignored by browser and devtools - css

Using both Chrome and Firefox, for some reason a certain css is being ignored. Also in devtools it is not shown as a css rule.
The following is shown with the relevant color, with or without the .e-rowcell prefix. Also, when inspecting this element in dev tools -> styles, I see the relevant css style from my file.
.e-rowcell.received {
color: #66DA26 !important;
}
<div data-v-72a15e66="" class="e-rowcell received">blah blah</div>
The following is shown with an incorrect color, for the same css above. This is located inside a cell of a table/grid. When inspecting this element in dev tools, I don't see it in the list.
<td class="e-rowcell received" role="gridcell" tabindex="-1" aria-label="$16.24 column header Feb" aria-colindex="2" index="7" style="text-align: center;">$16.24</td>
I know it's not much information but I don't know why it happens in order to add more relevant data. Let me know what to look for and I'll add more info.
In other words, why would a browser ignore classB in the following code class="classA classB" even though classB is defined properly?
Thanks

when you use the scoped attribute on the style of a component, the generated css rules also references the data-v attribute value and can cause problems if you have css that you want to apply for children of a component
you can remove the scoped attribute or move the styles to the child component if possible

Related

style not getting applied to component if I use the component's selector name

I have a component and I want to place it centrally within a grid. The selector of the component is app-signup-component and the rule I have applied is
app-signup-component{
align-self:center;
width:100%;
}
The it seems the rule is not getting applied. I am unable to figure out why. What am I doing wrong?
The top level component is content-component. Its html is
<div id="content-div"> <!--this is a flex -->
<router-outlet></router-outlet>
</div>
Its css is
#content-div{
display:flex;
height:75vh;
}
app-signup-component{
align-self:center;
width:100%;
}
The app-signup-component component gets added dynamically. It is a form. When I run the code, I see in the debugger window that css rules for app-signup-component are not applied (see attached pic)
If I manually add the rule in the browser then the form moves to the center (see below pic)
I don't know why it worked but if I move the rule to styles.css which is the global css file applicable across all components then the code works. I suppose the issue might be that if a rule is added in component's local css then that component has to exist in the page when the page/component is loaded. In my case, content component has router-outlet and when content component some other component homepage at start up. When I click a button, signup component gets loaded. But because signup component was not present initially, the css rule doesn't gets applied to it when it is later loaded probably because the browser doesn't recalculate the css rules. I suppose my options are that I either redesign the architecture to keep css effects local or I add such rules in the global styles.css.

Applying a Stylesheet Within One Div Only

I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more modern code on these pages but there is still old code on these pages. Because of the old code (which will stay and not be removed) I have some CSS that conflicts.
Is it possible to make an entire stylesheet only apply to styles within a div.
Example:
<div class="style-sheet-modern">
<!-- My Stylesheet applies only within this div -->
</div>
My first thought was to just rename my css to fall within the div. Example:
.style-sheet-modern .conflicting-class{ /* styles */ }
However, this isn't desirable because there are a few hundred lines of CSS and I don't want to go through and rename all of my CSS. Also makes it difficult to update in the future.
Is there a way to apply an entire stylesheet within a certain div and not anywhere else on the page?
Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.
<div class="style-sheet-modern">
<style scoped>
.conflicting-class { ... }
</style>
</div>
You can use #import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.
Why not give the <div> an ID?
Then you could use specificity to override just the classes/ids that are in that div?
IE:
<div id="style-sheet-modern">
<div class="my-class"></div>
<div class="etc"></div>
</div>
You could then target all styles inside the "modern" div like this:
#style-sheet-modern .my-class{
color:black;
}
#style-sheet-modern .etc {}
There would be no browser support issues.
If you're using something like less or sass – you could even have it in a separate file named "style-sheet-modern.less" or whatever you want it named and #import it at the bottom of your main styles file. This include would need to come last in the file so that it will override the other styles that could be applied to those same styles.
You could use a wildcard to reset all the styles inside the #style-sheet-modern as well if necessary like this:
#style-sheet-modern * {
reset: stuff; //obviously not the actual css
}
That reset for those styles would be the first thing in your 'style-sheet-modern.*ss' file.
And as I mentioned before, no browser support issues.

ignore css styles on certain type selectors

Say I have 2 sites, http://1.example.com, http://2.example.com.
My issue is this : I am to dynamically add content to 1.example.com and 2.example.com, as part of this dynamic content addition I need to download and apply a css file via javascript. Now there is a <hr> tag in my dynamic content I'd like to style. When I apply this on 1.example.com, all works fine, but when I try to apply it to 2.example.com, the issue is that 2.example.com has a stylesheet that already defines stylerules for the <hr> tag. Like say padding. I don't want to override the properties manually. Is there a way to ignore <hr> styles defined in 2.example.com for my dynamic content and only apply styles I downloaded?
Be more specific. Learn about CSS specificity to override styles.
You could, for example, add a class to the <hr> and style that.
Try like this,
You may find parent div in your dymanic content,
For example: .parent-div hr{ your styles }

Override/implement CSS with JSF and PrimeFaces

I use JSF and PrimeFaces and I try to modify render by changing or adding some CSS lines.
I added my CSS file named "styles.css" to my .xhtml page and it's loaded after those of PrimeFaces so I can override default values.
PrimeFaces create a div in my page :
<div id="j_idt13:universe" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 86px;">
....
</div>
I'm trying to change 86px size to 100% so in my styles.css I added :
#j_idt13:universe{
width: 100%;
}
but it doesn't work...With Firebug when I inspect source code, my #j_idt13:universe doesn't appear anywhere...
I can change some CSS by accessing class selector(.class) but not with id selector (#id).
In my case, how can I change 86px to 100% please ?
Thanks
Olivier
The colon : is a special character in CSS selectors representing the start of a pseudo selector. If you want to represent the colon literally as part of the element ID or class name, then you have to escape it using \.
#j_idt13\:universe {
}
Note that this doesn't work in IE6/7. You'd need to use \3A instead (with a trailing space).
#j_idt13\3A universe {
}
Also note that this will fail when you add another JSF component to the view, because j_idt13 is an autogenerated ID depending on the component's position in the view, not a fixed ID. Rather give the parent UINamingContainer component a fixed ID, or better, give the target component a style class, so that you can just use the class selector.
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?

Change property of CSS class in GWT at runtime

I'm familiar with assigning CSS classes to GWT elements to control their formatting, but what if I want to change an attribute in one of those CSS classes?
I've got a styled list of data. CSS classes are used to indicate the various data types (important, routine, trivial). I wish to allow the user to hide trivial entries. I'd like to modify the span.trivial CSS class to set display:none
I'm aware I could loop through the entries, see if an entry is trivial and add a noShow class (which itself has display:none) - but then I'm doing the looping, I'd rather let the browser do the work.
Is this possible in GWT?
Ian
I assume we have a structure similar to the following one
<div>
<span class="routine">A</span>
<span class="trivial">B</span>
<span class="trivial">C</span>
<div>
This is how I would solve the problem:
.hideTrivial span.trivial {
display: none;
}
<div class="hideTrivial">
<span class="routine">A</span>
<span class="trivial">B</span>
<span class="trivial">C</span>
<div>
The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)
So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.
(This technique can be used with and without GWT.)
AFAIK, javascript can not change the CSS file and have it reapplied. The same goes for GWT (since it compiles down to JS). So, you can not change a CSS rule and have all elements in your DOM reflect the change.
However, you can get a style of a DOM element and change that style. But that is for a particular element. In your case you'd still need to write code to traverses a set of element and make the change.
My suggestion would be to look at gwtQuery (a port, not a wrapper, of jQuery to GWT). It's super-efficient and super-compact. Here is a one-liner to do what you need:
$("span.trivial").hide()
Fot those who need to modify global CSS property values: you can choose StyleInjector for that purpose.
http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/dom/client/StyleInjector.html

Resources