I am trying to make a hover effect on a div with a Angular ngClass directive. In the template file I have a div element with class "list-item-container' which contains a div with class "list-item" that is iterated with a *ngFor directive. Inside the "list-item" div element I have three divs with class "list-item-column" which are placed horizontally like a table row with inline display. in the div with "list-item" class I have placed a mouseenter and mouseleave event listeners which calls hoverListItem() in my .ts file. the hoverListItem() function changes the value of listItemHovered variable to true or false. In the "list-item" class I have a ngClass directive which triggers a css class 'list-item-highlight' based on the value of listItemHovered boolean value which then changes to background to a different color.
The problem I'm facing is that upon hovering mouse pointer on the "list-item" div all my "list-item" divs are affected instead of the one I am hovering over. How to solve this problem?
.html file
<div class="list-item-container">
<ng-container *ngFor="let opportunity of dealService.opportunities">
<div [ngClass]="{'list-item-highlight': listItemHovered}" class="list-item" (mouseenter)="hoverListItem()"
(mouseleave)="hoverListItem()"
(click)="selectOpportunity(opportunity)">
<div
class="list-item-column">{{opportunity.account?.name === null ? "N/A" : opportunity.account.name}}</div>
<div class="list-item-column">{{opportunity.requirementTitle}}</div>
<div class="list-item-column">{{opportunity.salesValue | number: '1.0-2'}}</div>
</div>
</ng-container>
</div>
.css file
.list-item-container{
overflow: auto;
width: 100%;
max-height: 500px;
}
.list-item{
font-size: 15px;
border-radius: 10px ;
margin-top: 5px;
height: 50px;
background: lightgray;
color: black;
}
.list-item-highlight{
background: #7e00cc;
color: white;
}
.list-item-column{
height: inherit;
vertical-align: center;
display: inline-block;
width: 33.33%;
padding-left: 40px;
}
.ts file
hoverListItem() {
this.listItemHovered = !this.listItemHovered;
}
Right now you're creating and modifying listItemHovered flag inside component context, rather you should maintain a flag for each item level, which could help to easily identify wheather component has been highlighted or not.
[ngClass]="{'list-item-highlight': opportunity.listItemHovered}"
(mouseenter)="hoverListItem(opportunity)"
(mouseleave)="hoverListItem(opportunity)"
Component
hoverListItem(opportunity) {
opportunity.listItemHovered = !opportunity.listItemHovered;
}
Though I'd recommend to use :hover pseudo class if requirement is just to highlight the element on hover. That can be easily doable by changing CSS rule. This way could save several change detection cycle to be ran.
.list-item:hover {
background: #7e00cc;
color: white;
}
I would suggest use a directive to listen to the hover event on the target element and attach the class:
#Directive({
selector: '[hoverDir]'
})
export class HoverOverDirective {
#HostListener('mouseenter') onMouseEnter() {
this.elementRef.nativeElement.class = 'list-item-highlight';
}
#HostListener('mouseleave') onMouseLeave() {
this.elementRef.nativeElement.class = 'list-item-not-highlight';
}
}
Or the easiest way is to make use of CSS pseudo property :hover and use it as below:
.list-item:hover {
background: #7e00cc;
color: white;
}
I am designing a basic news-ish blog. Let's say on my news blog I have about 10 categories, and each of those categories will have a label that will appear to the top right of the card image. Now each label will have it's own specific identifying color. So for example, the video label will be red, the lifestyle label will be green, programming will be orange... etc.
The code I have on the bottom works, but my problem with it is that it is reusing the same 10 lines of css, with the only changing factor being the label color.
Is there a more efficient way of doing this?
.article-tag-news{
...
background-color: #ff8fd2;
...
}
.article-tag-games{
...
background-color: #f4f4f4;
...
}
.article-tag-videos{
...
background-color: #123456;
...
}
I would use a general class for the main css for the labels .article-tag and add the color with an new class tag .news etc.
.article-tag{
... //all the css applied to all the tags
}
.news{ //or .article-tag.news depending on your code
background-color: red;
}
And in your HTML use
<label class="article-tag news"></label>
You can use a class for all tagged articles:
.article-tag-all{
...
}
.article-tag-news{
background-color: #ff8fd2;
}
And use it like:
<article class="article-tag-all article-tag-news"></article>
Note: I am on my phone right now, formatting would be appreciated.
While keeping your current markup, styles common to all articles can be grouped in a rule with an attribute selector like:
[class="article-tag-"] {
/* common styles */
}
.article-tag-particular {
background-color: salmon;
}
My 2¢: problem with <label class="article-tag news"></label> is that from now you can't style the .news class anywhere else OR you can't style it independently/must always style .something-something.news {}.
I am using DevExpress controls on ASP Web Forms Application. I would like to have different disabled styles for my buttons, so I've created some styles:
.dxmLite_Moderno .dxm-disabled, .dxmLite_Moderno .dxm-disabled a.dx {
color: rgb(1, 211, 211);
border-style: none !important;
height: 36px;
padding-top: 2px;
}
.red {
color: rgb(255, 0, 0) !important;
}
.blue {
color: rgb(0, 255, 0) !important;
}
First override style of button if it's disabled.
Second is overriding buttons which have:
<dx:MenuItem ItemStyle-CssClass="red" Text="D" ItemStyle-Width="104" Name="I">
ItemStyle-CssClass called 'red'.
Now question is - it's possible to combine those css styles in way:
if button is disabled and red => have style red
if button is enabled and red => I dont want any style
if button is disabled and blue => have style blue
if button is enabld and blue => I don't want any style
I am asking because now situation looks like if I have enabled / disabled button red it's always color of style red.
What is important you have wrong blue definition color.
Second remove any !important from css.
And finally combine dxm-disabled class with your colors class:
.dxmLite_Moderno .dxm-disabled.red {
color: #f00;
}
.dxmLite_Moderno .dxm-disabled.blue {
color: #00f;
}
I create the demo for you:
http://jsfiddle.net/YQG9B/1/
I want to show datatable rows with different colors.
I am using rowStyleClass attribute.
But It is not changing the colors
My code in datatable is,
rowStyleClass="highlight";
and my css file is looks like this,
.highlight {
background: yellow !important ;
}
You should have like two classes with different colors and use, in the rowStyleClass attribute, inline if:
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
Where "rowIndex" you should set in the datatable rowIndexVar attribute
rowIndexVar="rowIndex"
That means that even rows will have row style class set as 'highlight1' and odd rows - 'highlight2'
See here more info
The easiest way is to implement .ui-datatable-odd and .ui-datatable-even style classes in your CSS, which are implemented by p:dataTable by default. Example:
.ui-datatable-odd {
background: #ffffff;
}
.ui-datatable-even {
background: #F2F5F9;
}
Ends up looking something like
It could be you need to use more specific selectors, read about css specificity for that
Try this...It is working in my case
.ui-widget-content .ui-datatable-even{
background: #F2F5F9;
}
.ui-widget-content .ui-datatable-odd{
background: red;
}
Tudor's answer is the correct way. In case you use treeTable you can do it this way:
.ui-treetable tbody tr:nth-child(odd) {
background-color: #edf2f6 !important;
}
.ui-treetable tbody tr:nth-child(even) {
background-color: #ffffff !important;
}
Are there any useful techniques for reducing the repetition of constants in a CSS file?
(For example, a bunch of different selectors which should all apply the same colour, or the same font size)?
Recently, variables have been added to the official CSS specs.
Variables allow you to so something like this :
body, html {
margin: 0;
height: 100%;
}
.theme-default {
--page-background-color: #cec;
--page-color: #333;
--button-border-width: 1px;
--button-border-color: #333;
--button-background-color: #f55;
--button-color: #fff;
--gutter-width: 1em;
float: left;
height: 100%;
width: 100%;
background-color: var(--page-background-color);
color: var(--page-color);
}
button {
background-color: var(--button-background-color);
color: var(--button-color);
border-color: var(--button-border-color);
border-width: var(--button-border-width);
}
.pad-box {
padding: var(--gutter-width);
}
<div class="theme-default">
<div class="pad-box">
<p>
This is a test
</p>
<button>
Themed button
</button>
</div>
</div>
Unfortunately, browser support is still very poor. According to CanIUse, the only browsers that support this feature today (march 9th, 2016), are Firefox 43+, Chrome 49+, Safari 9.1+ and iOS Safari 9.3+ :
Alternatives :
Until CSS variables are widely supported, you could consider using a CSS pre-processor language like Less or Sass.
CSS pre-processors wouldn't just allow you to use variables, but pretty much allow you to do anything you can do with a programming language.
For example, in Sass, you could create a function like this :
#function exponent($base, $exponent) {
$value: $base;
#if $exponent > 1 {
#for $i from 2 through $exponent {
$value: $value * $base;
}
}
#if $exponent < 1 {
#for $i from 0 through -$exponent {
$value: $value / $base;
}
}
#return $value;
}
Elements can belong to more than one class, so you can do something like this:
.DefaultBackColor
{
background-color: #123456;
}
.SomeOtherStyle
{
//other stuff here
}
.DefaultForeColor
{
color:#654321;
}
And then in the content portion somewhere:
<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>
The weaknesses here are that it gets pretty wordy in the body and you're unlikely to be able to get it down to listing a color only once. But you might be able to do it only two or three times and you can group those colors together, perhaps in their own sheet. Now when you want to change the color scheme they're all together and the change is pretty simple.
But, yeah, my biggest complain with CSS is the inability to define your own constants.
You should comma seperate each id or class for example:
h1,h2 {
color: #fff;
}
You can use global variables to avoid duplicacy.
p{
background-color: #ccc;
}
h1{
background-color: #ccc;
}
Here, you can initialize a global variable in :root pseudo class selector. :root is top level of the DOM.
:root{
--main--color: #ccc;
}
p{
background-color: var(--main-color);
}
h1{
background-color: var(--main-color);
}
NOTE: This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. More Info here
However, you can always use the Syntactically Awesome Style Sheets i.e.
In case Sass, you have to use $variable_name at the top to initialize the global variable.
$base : #ccc;
p{
background-color: $base;
}
h1{
background-color: $base;
}
You can use dynamic css frameworks like less.
Personally, I just use comma-separed selector, but there some solution for writing css programmatically. Maybe this is a little overkill for you simpler needs, but take a look at CleverCSS (Python)
Try Global variables to avoid duplicate coding
h1 {
color: red;
}
p {
font-weight: bold;
}
Or you can create different classes
.deflt-color {
color: green;
}
.dflt-nrml-font {
font-size: 12px;
}
.dflt-header-font {
font-size: 18px;
}
As far as I know, without programmatically generating the CSS file, there's no way to, say, define your favorite shade of blue (#E0EAF1) in one and only one spot.
You could pretty easily write a computer program to generate the file. Execute a simple find-and-replace operation and then save as a .css file.
Go from this source.css…
h1,h2 {
color: %%YOURFAVORITECOLOR%%;
}
div.something {
border-color: %%YOURFAVORITECOLOR%%;
}
to this target.css…
h1,h2 {
color: #E0EAF1;
}
div.something {
border-color: #E0EAF1;
}
with code like this… (VB.NET)
Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)
You can use multiple inheritance in your html elements (e.g. <div class="one two">) but I'm not aware of a way of having constants in the CSS files themselves.
This link (the first found when googling your question) seems to have a fairly indepth look at the issue:
http://icant.co.uk/articles/cssconstants/
CSS Variables, if it ever becomes implemented in all major browsers, may one day resolve this issue.
Until then, you'll either have to copy and paste, or use a preprocessor of whatever sort, like others have suggested (typically using server-sider scripting).
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<p> some red text </p>
You can change color by JS
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
document.documentElement.style.setProperty('--primary-color', 'blue');