I'm trying to hide and show the div on click event of icon.for that I am using ngClass with condition.When variable in condition changes the class remains same ,it's not updating the class.
//html
<div class="column icon">
<mat-icon (click)="onIconClick()" id="icon" class="column" [ngStyle]="showpanel ? {'color':'#4ac2f7'}:''">filter_list</mat-icon>
</div>
//hide and show the div
<div class="search-box-container" id="filter-tab" [ngClass]="'showpanel' ? 'show' : 'hidden'">
</div>
//onclick icon .ts code
onIconClick() {
if (this.showpanel) {
this.showpanel = false;
} else {
this.showpanel = true;
}
console.log(this.showpanel);
}
Remove Condition(showpanel) single quote
Try this:
<div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
</div>
This [ngClass]="'showpanel' ? 'show' : 'hidden'" pattern is taking your showpanel as a string, so it will always evaluated as true and return 'show' class. Remove the single quote mark and it shall evaluate correctly
You have not added CSS in your question. Although, I checked your code. You only need to remove quotes from showpanel.
Please see below code -
In app.component.html
<button (click)="onIconClick()" id="icon" class="column" [ngStyle]="showpanel ? {'color':'#4ac2f7'}:''">filter_list</button>
<div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
filter-tab
</div>
In your aap.component.ts
showpanel = false;
onIconClick() {
if (this.showpanel) {
this.showpanel = false;
} else {
this.showpanel = true;
}
console.log(this.showpanel);
}
In your app.component.css
.show {
display: block;
}
.hidden {
display: none;
}
Replace 'div' with 'mat-icon'
Also, you can check the working example here - https://stackblitz.com/edit/angular-xsvxd6
<button (click)="showpanel= !showpanel" id="icon" class="column" [ngStyle]="showpanel ? {'color':'#4ac2f7'}:''">filter_list</button>
<div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
filter-tab
</div>
Css
.show {
display: block;
}
.hidden {
display: none;
}
without Function even you can do the same thing.
Stackblitz link here
and if you want function to do the same then
onIconClick() {
this.showpanel =! this.showpanel;
}
Related
Suppose one of my keys has value Green/Red and I want to show bootstrap btn-success when its value is green and btn-danger when its red.
You need to update ng-class
<div ng:controller="CartForm">
<ul>
<li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
</ul>
</div>
and delete appliedClass function
Working jsFiddle
I think you are looking for ng-class. You can use the following synthax:
<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>
In your case, it would be something like:
<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>
As you did not provide a code sample, here is how it works with an example:
angular.module('app', []).controller('MyCtrl', function() {
this.valueSuccess = false;
this.valueDanger = true;
});
.danger { background-color: red; }
.success { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app">
<div ng-controller="MyCtrl as vm">
<p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
<p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
</div>
</section>
I am trying to detect focus on a child element of a contenteditable element, for the purposes of pure CSS styling. (I know I could detect this with JS, add an extra class and do it that way, but that is so long-winded.)
Basically, I have something along the lines of:
<div contenteditable="true">
Some text <span class="edit">that</span> goes here.
</div>
I tried CSS along the lines of:
.edit:focus {
color: #FF0000;
}
I want that span to change colour when the caret enters it, but apparently the focus is only applied to the div set to contenteditable, not to any child thereof. I have tried applying a second contenteditable to the span, but besides being a horribly sloppy approach, it doesn't work anyway.
Is there a solution to this?
Because of the limitation that elements within a contenteditable element can't generally receive focus, I suggest faking it by adding a class to your <span> element when the selection is contained within it, which you can do by monitoring the selection for changes (you'll have to use mouse and keyboard events and polling for thoroughness in Firefox until the selectionchange event is implemented in that browser).
var selectionContainer = null;
function updateSelectionContainer() {
var newSelectionContainer = null;
var sel;
if (window.getSelection && (sel = window.getSelection()).rangeCount) {
newSelectionContainer = sel.getRangeAt(0).commonAncestorContainer;
// Ensure we have an element rather than a text node
if (newSelectionContainer.nodeType != 1) {
newSelectionContainer = newSelectionContainer.parentNode;
}
}
if (newSelectionContainer != selectionContainer) {
if (selectionContainer) {
selectionContainer.className = selectionContainer.className.replace(/ ?containsSelection/, "");
}
if (newSelectionContainer) {
newSelectionContainer.className +=
(newSelectionContainer.className ? " containsSelection" : "containsSelection");
}
selectionContainer = newSelectionContainer;
}
}
if ("onselectionchange" in document) {
document.onselectionchange = updateSelectionContainer;
} else {
var el = document.getElementById("editor");
el.onmousedown = el.onmouseup = el.onkeydown = el.onkeyup = el.oninput = updateSelectionContainer;
window.setInterval(updateSelectionContainer, 100);
}
div {
font-size: 200%;
}
.edit.containsSelection {
color: red;
font-weight: bold;
}
<div contenteditable="true" id="editor">
Some text <span class="edit">that</span> goes here.
</div>
My understanding is that the type of elements that can receive focus (automatically) is limited.
See SO Question
One option is to add tabindex to the span.
body {
font-size: 3rem;
}
div[contenteditable=true] .edit:focus {
color: #FF0000;
}
<div contenteditable="true">Some text <span class="edit" tabindex="0">that</span> goes here.</div>
:focus > .edit { color: #cc0000; }
<div contenteditable="true">Some text <span class="edit">that</span> goes here.</div>
<div contenteditable="true">Some text that goes here.</div>
Just add this instead of :focus. Fiddle.
.edit {
color: #f00;
}
My HTML code looks as follows:
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Output A: <div class="dash_data_A"></div>
- Output B: <div class="dash_data_B"></div>
- Output C: <div class="dash_data_C"></div>
The display on the website looks as follows:
- Output A:
false
- Output B:
true
- Output C:
false
First wish: The output value should be on the same line (avoid line break), like this:
- Output A: false
- Output B: true
- Output C: false
Second wish: The output value should change the font color of false (red) and true (green).
Do I have to implement that in the css-file? Or in the js? Or even both? What do you recommend?
By default, a div is a block level element, which means it takes up the entire width and causes elements to continue on the next line, under it...which is what you're seeing. So to fix that, you need to change the display type of the divs that need to be inline OR use a different tag that is inline by default, such as span.
.dash_data_A,
.dash_data_B,
.dash_data_C {
display: inline-block;
}
To handle the color part, I would apply a class depending on what the result is, like this:
<div class="dash_data_A false"></div>
<div class="dash_data_B true"></div>
<div class="dash_data_C false"></div>
And then the CSS:
.true {
color: green;}
.false {
color: red;}
Add the following CSS:
.dash_data_A, .dash_data_B, .dash_data_C, .title {
float: left;
}
And then wrap the "output"-stuff in a div as well.
A quick JSfiddle, it's not perfect, but it functions. You should make it perfect yourself :)
You can also simplify the code too.
<div class="dash_data false"></div>
<div class="dash_data true"></div>
<div class="dash_data false"></div>
.dash_data {
display: inline;
//float: left;
}
1. one option using only css is
CSS
.dash_data_A, .dash_data_B, .dash_data_C, .title {
float: left;
}
.false{
color:red;
}
.true{
color:Green;
}
DEMO FIDDLE
2. second option
if the true,false values are generated dynamically use jquery
FIDDLE JS DEMO
JQUERY
var option = "";
$(function () {
$('.option').each(function () {
option="";
option = $(this).html();
alert(option);
if (option.trim() == 'true') {
$(this).addClass('true');
} else {
$(this).addClass('false');
}
});
});
Line 3 is a hidden <div> . I don't want that one to be taken from the odd/even css rule.
What is the best approach to get this to work?
.hidden {display:none;}
.box:not(.hidden):nth-child(odd) { background: orange; }
.box:not(.hidden):nth-child(even) { background: green; }
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box hidden">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
http://jsfiddle.net/k0wzoweh/
Note: There can be multiple hidden elements.
:nth-child() pseudo-class looks through the children tree of the parent to match the valid child (odd, even, etc), therefore when you combine it with :not(.hidden) it won't filter the elements properly.
Alternatively, we could fake the effect by CSS gradient as follows:
.hidden {display:none;}
.wrap {
line-height: 1.2em;
background-color: orange;
background-image: linear-gradient(transparent 50%, green 50%);
background-size: 100% 2.4em;
}
<div class="wrap">
<div class="box">xx</div>
<div class="box">xx</div>
<div class="box hidden">xx</div>
<div class="box">xx</div>
<div class="box">xx</div>
<div class="box">xx</div>
<div class="box">xx</div>
</div>
Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.
If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.
If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:
foreach ($divs AS $i => $div) {
echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}
Even trying to do something tricky like
.box[class='box']:nth-of-type(even)
doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.
I'm not sure there's any way to do this purely with CSS - I can't think of any right now.
Here's a CSS-only solution:
.box {
background: orange;
}
.box:nth-child(even) {
background: green;
}
.box.hidden {
display: none;
}
.box.hidden ~ .box:nth-child(odd) {
background: green;
}
.box.hidden ~ .box:nth-child(even) {
background: orange;
}
<div class="wrap">
<div class="box">xx</div>
<div class="box">xx</div>
<div class="box hidden">xx</div>
<div class="box">xx</div>
<div class="box">xx</div>
<div class="box">xx</div>
<div class="box">xx</div>
</div>
Since my rows are being hidden with js, I found that the easiest approach for me was to just add an additional hidden row after each real row that I hide, and remove the hidden rows when I show the real rows again.
Hide the rows you want to hide calling .hide() for each table row, then call
$("tr:visible:even").css( "background-color", "" ); // clear attribute for all rows
$("tr:visible:even").css( "background-color", "#ddddff" ); // set attribute for even rows
Add your table name to the selector to be more specific. Using :even makes it skip the Header row.
As #Fateh Khalsa pointed out, I had a similar problem and since I was manipulating my table with JavaScript (jQuery to be precise), I was able to do the following:
(Note: This assumes use of JavaScript/jQuery which the OP did not state whether or not would be available to them. This answer assumes yes, it would be, and that we may want to toggle visibility of hidden rows at some point.)
Inactive records (identified with the CSS class "hideme") are currently visible.
Visitor clicks link to hide inactive records from the list.
jQuery adds "hidden" CSS class to "hideme" records.
jQuery adds additional empty row to the table immediately following the row we just hid, adding CSS classes "hidden" (so it doesn't show) and "skiprowcolor" so we can easily identify these extra rows.
This process is then reversed when the link is clicked again.
Inactive records (identified with the CSS class "hideme") are currently hidden.
Visitor clicks link to show inactive records from the list.
jQuery removes "hidden" CSS class to "hideme" records.
jQuery removes additional empty row to the table immediately following the row we just showed, identified by CSS class "skiprowcolor".
Here's the JavaScript (jQuery) to do this:
// Inactive Row Toggle
$('.toginactive').click(function(e) {
e.preventDefault();
if ($(this).hasClass('on')) {
$(this).removeClass('on'); // Track that we're no longer hiding rows
$('.wrap tr.hideme').removeClass('hidden'); // Remove hidden class from inactive rows
$('.wrap tr.skiprowcolor').remove(); // Remove extra rows added to fix coloring
} else {
$(this).addClass('on'); // Track that we're hiding rows
$('.wrap tr.hideme').addClass('hidden'); // Add hidden class from inactive rows
$('.wrap tr.hideme').after('<tr class="hidden skiprowcolor"></tr>');
// Add extra row after each hidden row to fix coloring
}
});
The HTML link is simple
Hide/Show Hidden Rows
scss for #tim answer's above, to keep class name changes to a minimum
$selector: "box";
$hidden-selector: "hidden";
.#{$selector} {
background: orange;
:nth-child(even) {
background: green;
}
&.#{$hidden-selector} {
display: none;
}
&.#{$hidden-selector} ~ {
.#{$selector} {
&:nth-of-type(odd) {
background: green;
}
&:nth-of-type(even) {
background: orange;
}
}
}
}
Another way, albeit on the fringe side, is to have an extra <tbody> and either move or copy rows there. Or, an extra div wrapper if using OPs example. Copying easiest of course in regards to restoring etc.
This approach can be useful in some cases.
Below is a simple example where rows are moved when filtered. And yes, it is ranking of stripper names, found it fitting as we are talking stripes ... hah
const Filter = {
table: null,
last: {
tt: null,
value: ''
},
name: function (txt) {
let tb_d = Filter.table.querySelector('.data'),
tb_f = Filter.table.querySelector('.filtered'),
tr = tb_d.querySelectorAll('TR'),
f = 0
;
tb_f.innerHTML = '';
if (txt.trim() == '') {
tb_d.classList.remove('hide');
} else {
txt = txt.toLowerCase();
for (let i = 0; i < tr.length; ++i) {
let td = tr[i].querySelectorAll('TD')[1];
if (td.textContent.toLowerCase().includes(txt)) {
tb_f.appendChild(tr[i].cloneNode(true));
f = 1;
}
}
if (f)
tb_d.classList[f ? 'add' : 'remove']('hide');
}
},
key: function (e) {
const v = e.target.value;
if (v == Filter.last.value)
return;
Filter.last.value = v;
clearTimeout(Filter.last.tt);
Filter.last.tt = setTimeout(function () { Filter.name(v); }, 200);
}
};
Filter.table = document.getElementById('table');
Filter.table.addEventListener('keyup', Filter.key);
table {
width: 200px;
border: 3px solid #aaa;
}
tbody tr { background: #e33; }
tbody tr:nth-child(even) { background: #e3e; }
.hide { display: none; }
<table id="table">
<thead>
<tr><th></th><th><input type="text" id="filter" data-keyup="filter" /></th></tr>
<tr><th>#</th><th>Name</th></tr>
</thead>
<tbody class="filtered">
</tbody>
<tbody class="data">
<tr><td>1</td><td>Crystal</td></tr>
<tr><td>2</td><td>Tiffany</td></tr>
<tr><td>3</td><td>Amber</td></tr>
<tr><td>4</td><td>Brandi</td></tr>
<tr><td>5</td><td>Lola</td></tr>
<tr><td>6</td><td>Angel</td></tr>
<tr><td>7</td><td>Ginger</td></tr>
<tr><td>8</td><td>Candy</td></tr>
</tbody>
</table>
You can use another type of CSS selector: tbody > tr:nth-of-type(odd)
to only target tr nodes, and then, instead of using class names to hide the rows, simply wrap them with some element (which hides them), so the CSS selector would only match odd table rows:
const searchElem = document.querySelector('input');
const tableElem = document.querySelector('table');
const tableBody = document.querySelector('tbody');
function search() {
const str = searchElem.value.toLowerCase();
const rows = tableElem.querySelectorAll('tr');
// remove previous wrappers
// https://stackoverflow.com/a/48573634/104380
tableBody.querySelectorAll('div').forEach(w => {
w.replaceWith(...w.childNodes)
});
// create a wrapper which hides its content:
const wrapper = document.createElement("div");
wrapper.setAttribute('hidden', true);
rows.forEach(function(row){
const text = row.textContent.toLowerCase();
if (str.length && !text.includes(str)) {
// replace row with wrapper and put the row inside it
row.replaceWith(wrapper);
wrapper.appendChild(row);
}
});
}
searchElem.addEventListener('keyup', search);
tbody > tr:nth-of-type(odd) {
background: pink
}
<input type="search" placeholder="search">
<table>
<tbody>
<tr><td>Apple<td>220
<tr><td>Watermelon<td>465
<tr><td>Orange<td>94
<tr><td>Pear<td>567
<tr><td>Cherry<td>483
<tr><td>Strawberry<td>246
<tr><td>Nectarine<td>558
<tr><td>Grape<td>535
<tr><td>Mango<td>450
<tr><td>Blueberry<td>911
<tr><td>Pomegranate<td>386
<tr><td>Carambola<td>351
<tr><td>Plum<td>607
<tr><td>Banana<td>292
<tr><td>Raspberry<td>912
<tr><td>Mandarin<td>456
<tr><td>Jackfruit<td>976
<tr><td>Papaya<td>200
<tr><td>Kiwi<td>217
<tr><td>Pineapple<td>710
<tr><td>Lime<td>983
<tr><td>Lemon<td>960
<tr><td>Apricot<td>647
<tr><td>Grapefruit<td>861
<tr><td>Melon<td>226
<tr><td>Coconut<td>868
<tr><td>Avocado<td>385
<tr><td>Peach<td>419
</tbody>
</table>
I'm trying to edit the border-bottom-color individual depending on a property of the element in ng-repeat.
Here is an example how the html is structured. The changed style is
.active-tool::after {border-bottom-color: rgb(247, 153, 248)}
html:
<div data-ng-repeat="row in rows">
<div class='container'>
<div
data-ng-style="getPrimaryColor(tvShow)"
class='folder tvshow'
data-ng-class="isActiveFolder(tvShow)"
id='{{tvShow.id}}'
data-ng-repeat="tvShow in row track by $index">
<div data-ng-click="setSelectedTvShow(tvShow)">
<p class="tvshow-name">{{tvShow.name}}</p>
</div>
</div>
</div>
controller.js
$scope.isActiveFolder = function(tvShow) {
if($scope.selectedTvShow !== null && tvShow.id !== null) {
return $scope.selectedTvShow===tvShow.id ? 'active-tool' : '';
}
};
$scope.getPrimaryColor = function(tvShow) {
if($scope.selectedTvShow !== null) {
var result = '{' + tvShow.id + '.active-tool::after {border-bottom-color: rgb(247, 153, 248)}}';
console.log(result);
return result;
};
Any ideas how this could be done?
I use this quick hack:
put this inside your template:
<style type="text/css">
.active-tool::after {
border-bottom-color: {{getShowBorderColor(tvShow)}};
}
</style>
and then in your controller:
$scope.getShowBorderColor = function(tvShow){
return tvShow.color; // change this for how you want to calculate the color
};
You cannot use ng-style like this, because html style attribute does not support css selectors.
Actually, you can do it with no javascript at all:
markup:
<div data-ng-repeat="row in rows">
<div class='container'>
<div class='folder tvshow'
data-ng-class="{active-tool : selectedTvShow === tvShow.id}"
id='{{tvShow.id}}'
data-ng-repeat="tvShow in row track by $index">
<div data-ng-click="selectedTvShow = tvShow.id">
<p class="tvshow-name">{{tvShow.name}}</p>
</div>
</div>
</div>
</div>
css:
.active-tool::after {
border-bottom-color: rgb(247, 153, 248);
}