I would like to define a class to alternating rows in angular 4, how to do this?
HTML
<div class="scrollbars">
<div *ngFor="let path of Xyzpaths">
<div>{{path.xyz}}</div>
<div>{{path.salesItem}}</div>
<div>{{path.path1}}</div>
<div>{{path.path2}}</div>
</div>
</div>
CSS
.odd { background-color: #f2f9ff;}
.even { background-color: #eceff3; }
Use CSS's nth-child selector:
scrollbars > div:nth-child(even) {background-color: #f2f9ff;}
scrollbars > div:nth-child(odd) {background-color: #eceff3;}
Try to avoid adding template logic where you don't need to, and in this case, you don't need to -- CSS can do it all and is orders of magnitude more efficient than using a template directive.
yes, you can use the odd and even local variables in the ngFor, something like this:
<div class="scrollbars">
<div *ngFor="let path of Xyzpaths index as i; let even = even; let odd = odd"
[ngClass]="{ myOddClass: odd, myEvenClass: even }">
<div>{{path.xyz}}</div>
<div>{{path.salesItem}}</div>
<div>{{path.path1}}</div>
<div>{{path.path2}}</div>
</div>
</div>
Documentation.
Related
I am using react-select in my code. https://www.npmjs.com/package/react-select
I want to style my drop down using classNames, so that I referred https://react-select.com/styles. The DOM structure of react slect is shown in the link.
How can I style the react-select using classNames?
Can anyone show a sample code?
According to the documentation
If you provide the className prop to react-select, the SelectContainer
will be given a className based on the provided value.
So it should work like this:
<Select className="abc" .... />
Then you can use your classname as usual.
.abc {
color: red;
}
You can also use classNamePrefix
by specifing a classNamePrefix, react-select will render all classNames with your prefix. If you use this:
<Select className="abc" classNamePrefix="react-select" ... />
Your Select will automatically render a class structure like this:
See their example:
For example, given className='react-select-container' and classNamePrefix="react-select", the DOM structure is similar to this:
<div class="react-select-container">
<div class="react-select__control">
<div class="react-select__value-container">...</div>
<div class="react-select__indicators">...</div>
</div>
<div class="react-select__menu">
<div class="react-select__menu-list">
<div class="react-select__option">...</div>
</div>
</div>
</div>
So in your css, simply do:
.react-select-container {
background-color: 'red';
}
.react-select__menu {
height: 100vh;
}
etc
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.
I am working on a tree view of undeterminable nestability, but would like to define some nested rules for styling. For example, I want the first level item to have a particular border. Nested items immediately underneath to have a different border. I have a working example, but it is static and verbose. I know there has to be a better way using selectors, but I can't seem to make it work. Here is my current solution-
.item {
border-left-color: #somecolor1;
}
.item > .item {
border-left-color: #somecolor2;
}
.item > .item > .item {
border-left-color: #somecolor3;
}
.item > .item > .item > .item {
border-left-color: #somecolor4;
}
.item > .item > .item > .item > .item {
border-left-color: #somecolor5;
}
So this works, but obviously it is kind of verbose. Is there a better way?
In CSS the selector string is largely describing the nesting structure, and there does not currently exist any generational skipping selectors such that you might theoretically do something like .item:nth-grandchild(4) to replace your fifth example.
If reducing verbosity of your css is of high importance to you (lets say you have up 10 or even 100 levels of nesting you are switching on), then really you need to look into modifying the html itself in order to reduce the css needed. That can be done dynamically via server-side scripting (PHP, etc.), or client-side scripting (Javascript), or statically by you. Which way you choose will depend on a variety of factors.
The html modification can be in the form of more specific classes or direct style properties, but I recommend the former. Here are at least four ways css would be reduced:
#1 Multiple Classes, One Indicating Level
Sample HTML
<div class="item L-1">
<div class="item L-2">
<div class="item L-3">
</div>
</div>
</div>
Sample CSS
.item.L-1 {
border-left-color: #somecolor1;
}
.item.L-2 {
border-left-color: #somecolor2;
}
.item.L-3 {
border-left-color: #somecolor3;
}
#2 Multiple Classes, One Indicating Color
Sample HTML
<div class="item LBC-1">
<div class="item LBC-2">
<div class="item LBC-3">
</div>
</div>
</div>
Sample CSS
.item.LBC-1 {
border-left-color: #somecolor1;
}
.item.LBC-2 {
border-left-color: #somecolor2;
}
.item.LBC-3 {
border-left-color: #somecolor3;
}
#3 Single Class Name Indicating Level
Sample HTML
<div class="item-L1">
<div class="item-L2">
<div class="item-L3">
</div>
</div>
</div>
Sample CSS
[class *= "item-"] {
/* common css properties for the items goes here */
}
.item-L1 {
border-left-color: #somecolor1;
}
.item-L2 {
border-left-color: #somecolor2;
}
.item-L3 {
border-left-color: #somecolor3;
}
#4 Style Properties for Each Item
Sample HTML
<div class="item" style="border-left-color: #somecolor1">
<div class="item" style="border-left-color: #somecolor2">
<div class="item" style="border-left-color: #somecolor3">
</div>
</div>
</div>
Sample CSS
/* none to control color */
Discussion of "Best"
Often dynamic solutions end up producing html like that of #4, which ends up making the html very verbose, and I personally would not recommend it. However, those dynamic solutions do not need to do that, but could instead add class names like #1-3.
What is ultimately "best" depends a lot on what you are trying to achieve, how much control you have, and what other properties need changing as well. Personally, I would avoid #2 as well, because it begins to tie presentation too much to html by having a class name associated with the "left border color." To me, solution #1 or #3 would be best, as those are simply setting classes that help the css to know what "level" the .item is at, which then allows for specific targeting to that level for anything you may need it for.
Of course, if you were really dealing with 100 nested levels, then even for solutions #1-3, you might want to look into some css preprocessor to generate the 100 levels of code needed. But the css output would still be far less than the long selector strings needed using the current method you are doing.
I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.
I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.
Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?
Can this be done using some kind of if statement condition in CSS?
For example, in 1.html:
<div class="classname"> Some code </div>
In 2.html:
<div class="classname"> Some different code </div>
Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?
Once again, I would not like to remove the class name at all, if possible.
Thanks!
I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:
<nav class='mainnav'><div class="classname one"> Some code </div></nav>
<div class='wrapper'><div class="classname"> Some different code </div></div>
You can easily target these:
.mainnav>.classone {}
.wrapper>.classone {}
Or if the parent html has a class:
<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>
.ancestor1 .classname {}
.ancestor2 .classname {}
Obviously this depends on where in the html they might be.
You can add another class name to each element.
<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>
And then aplpy different rules to them:
.classname.one {
border: 1px solid #00f;
}
.classname.two {
border: 1px solid #f00;
}
Edit:
Updated Demo link: http://jsfiddle.net/8C76m/2/
If you must keep only one class for each element, you may try the nth-child or nth-of-type pseudo-class:
.classname:first-child {
font-size: 2em;
}
.classname:nth-of-type(2) {
color: #f00;
}
Ref:
http://www.w3schools.com/cssref/sel_firstchild.asp and http://www.w3schools.com/cssref/sel_nth-of-type.asp
Just give each one a different id
#firsthtml .classname {
}
#sechtml .classname {
}
Be sure to use the space, as #firsthtml.classname is something totally different.
<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>
You could also use two different class names
<div class="classname secondclassname"></div>
Define secondclassname in your css with the additional css
.classname.secondclassname{
}
You can also do something like this:
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
And the CSS for the first .classname would be something like that:
.classname:not(.second) {}
For the second element it goes easily:
.classname.second {}
I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:
First menu:
<div class="classname"> Some code </div>
Second menu:
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>