I would like to know how can i turn the accordion to 90 degree on click of it for repo and bundles in the below plunkr. I am new to css. Any hekp on this is appreciated. Plunkr link - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable" >
<div class="row">
<div class="col-md-12">
<div class="tableheight ">
<table class="treetable-nested childtable">
<thead>
<tr>
<th style="width:5%;">
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th>
<th >
Name
</th>
<th class="cell-members">
Version
</th>
<th class="cell-members">
Size
</th>
<th class="cell-members">
Date Modified
</th>
<th class="cell-members">
Labels
</th>
<th class="cell-members">
Description
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
<tr id={{item.id}}>
<td>
<button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
</td>
<td>
{{item.name}}
</td>
<td class="cell-members">
<!-- {{item.version}} --> 0
</td>
<td class="cell-members">
<!-- {{item.size}}--> 0
</td>
<td class="cell-members" >
<!-- {{item.date}}--> 0
</td>
<td class="cell-members">
{{item.label}}
</td>
<td class="cell-members">
{{item.description}}
</td>
</tr>
<tr ng-if='item.children && item.children.length > 0'>
<td colspan="7" id="bundle_1" >
<table ng-show="item.showTree" class="treetable-nested" style="width:100%;">
<tbody ng-repeat='bundles in item.children'>
<tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
<td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
<td>{{bundles.bundleName}}</td>
<td class="cell-members">{{bundles.bundleVersion}}</td>
<td class="cell-members">{{bundles.bundleSize}}</td>
<td class="cell-members">{{bundles.bundleModified}}</td>
<td class="cell-members">{{bundles.bundleLabels}}</td>
<td class="cell-members">{{bundles.bundleDescription}}</td>
</tr>
<tr ng-show='showComponents' ng-repeat='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;">
<td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/></td>
<td>{{components.value}}</td>
<td>{{components.Version}}</td>
<td>{{components.Size}}</td>
<td>{{components.Modified}}</td>
<td>{{components.Labels}}</td>
<td>{{components.Description}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Here is how I solved your problem:
Step 1: Figure out how to rotate elements with CSS. You can use the CSS transform property to rotate elements.
Step 2: Define a CSS class which would apply the transformation to the icon
.accordion.expanded:before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
Step 3: Figure out how to apply the CSS class with the transformation through AngularJS. You can toggle CSS classes with AngularJS in multiple ways.
One option would be passing the $event onlick
<button class="accordion" ng-click="displayChildren(item,item.id,$event)"></button>
and toggling the class on the element like:
$scope.displayChildren = function(item, id, event) {
angular.element((event.target)).toggleClass('expanded');
//rest of your logic
}
The second option is by manipulating a variable and setting the class to ng-class like
<button class="accordion" ng-click='showComponents = !showComponents' ng-class="{'expanded' : showComponents}"></button>
You can find the plunker i tried this out here
You can do this:
.accordion:active {
transform: rotateX(90deg);
}
If you want it rotetes permanently use jquery:
$('.accordion').click(function(){$(this).css('transform', 'rotateX(90deg)');});
and if you want it rotates and rotate back by button click:
<style>
.rotated {
transform: rotateX(90deg);
}
</style>
$('#btnRotator').click(function(){$('.accordion').toggleClass('rotated');});
Use Angular to attach an active class to expanded accordions that applies the CSS transform.
.accordion.active:before {
transform:rotate(90deg);
}
Looks like you can add ng-class="{'active' : item.showTree}" to accomplish an active class on the button. You also already have an :after target for an active class so you should remove that too.
Related
I have two tables parent and child now I want to link the child table data with the parent heading cell. I can't change the code structure like removing the child table because this is done in Odoo and also js link with this structure. I tried a lot but didn't achieve the correct output.
The HTML code is
Note: These columns should have more width depending upon their table data columns are Account, Partner, Subject
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Current Output of the table
So even though these tables are seperated, we can still use some styling to at least make it look like it's one table. But yeah the structure is quite bad and it would help a lot if you could make sure each row has always the same amount of columns. That the first row has 4 columns and the second one 8 does make this kind of a Hail Mary.
But the general idea is you give each column the width it needs.
/* Default to hide some generated styling*/
ul{ display:none; }
.p-0{ padding: 0!important; }
tbody{ font-size: 14px!important; }
table table {margin-bottom: 0!important; }
table table td { border-top: none!important; }
/*A small zoom(out) and min-width if screen is not big enough */
.container-fluid{ zoom: 0.8; min-width: 1100px; }
/* Default for 8 columns if they all would be equal*/
th, td{ width: 12.5%; }
/*The "Magic", specific widths for each column */
/*Obviously works best if each row has 8 columns*/
/*Play with it, but make sure it adds up to 100%*/
th:nth-child(1),
td:nth-child(1){
width: 20%;
}
th:nth-child(2),
td:nth-child(2){
width: 10%;
}
th:nth-child(3),
td:nth-child(3){
width: 5%;
}
th:nth-child(4),
td:nth-child(4){
width: 20%;
}
th:nth-child(5),
td:nth-child(5){
width: 15%;
}
th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
width: 10%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>==
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have a table and I want to compare it to the table.
If A2 > A1, I want to set the row to red color.
I can access data with Each command, but I have difficulty in the class to assign.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr id="satir">
<td>A1</td>
<td id="envanter" class="">
<center>44</center>
</td>
<td id="kritikStok" class="">
<center>45</center>
</td>
</tr>
<tr id="satir">
<td>A2</td>
<td id="envanter" class="">
<center>50</center>
</td>
<td id="kritikStok" class="">
<center>10</center>
</td>
</tr>
<tr id="satir">
<td>A3</td>
<td id="envanter" class="">
<center>26</center>
</td>
<td id="kritikStok" class="">
<center>27</center>
</td>
</tr>
<tr id="satir">
<td>A4</td>
<td id="envanter" class="">
<center>40</center>
</td>
<td id="kritikStok" class="">
<center>39</center>
</td>
</tr>
</tbody>
</table>
You can use .each loop to iterate through your tbody trs then use .find("td:eq(1) center") to get value of td from 2nd column and .find("td:eq(2) center") to get value from 3rd column then compare both and add class depending on this .
Demo Code :
//loop through tr
$("#arsivTablosu tr").each(function() {
//check the value of 2 & 3 td
parseInt($(this).find("td:eq(2) center").text()) > parseInt($(this).find("td:eq(1) center").text()) ? $(this).addClass("red_color") : ""
})
.red_color {
background-color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr>
<td>A1</td>
<td>
<center>44</center>
</td>
<td>
<center>45</center>
</td>
</tr>
<tr>
<td>A2</td>
<td>
<center>50</center>
</td>
<td>
<center>10</center>
</td>
</tr>
<tr>
<td>A3</td>
<td>
<center>26</center>
</td>
<td>
<center>27</center>
</td>
</tr>
<tr>
<td>A4</td>
<td>
<center>40</center>
</td>
<td>
<center>39</center>
</td>
</tr>
</tbody>
</table>
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
My current task involves creating a dash board which is uses tree structure and table.
My code is available in the plunker - https://plnkr.co/edit/Fe1LAcc8iNP03dImlWUn?p=preview
I want to know how achieve the below points in the above plunker.
1) If the parent is checked then all its children should get checked.
For example, if Name is checked then all its children repo1,repo8 and repo7 should get checked automatically. Similarly all the children of repo1,repo7 and repo8.
2) If I manually check the children of say repo1 then repo1 also should get checked. If even one child is un checked then repo1 should get unchecked too.
Help on this is appreciated.
index.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
<table class="table-nested ">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
Repository
</th>
<th >
Version
</th>
<th >
Size
</th>
<th >
Modified By
</th>
<th >
Labels
</th>
<th >
Description
</th>
</tr>
</thead>
<tbody style="font-size:12px" data-ng-repeat="item in list">
<tr >
<td ><button style="background-color: #fff;" class="accordion"></button>
{{item.name}}
</td>
<td >
{{item.Version}}
</td>
<td >
{{item.Size}}
</td>
<td >
{{item.ModifiedBy}}
</td>
<td >
{{item.Labels}}
</td>
<td >
{{item.Description}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?
JS Fiddle
HTML code:
<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Update
I tried this CSS:
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
It doesn't work, unfortunately.
Remove the class "table-hover" from the table tag.
http://jsfiddle.net/ozr598jb/6/
You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
background-color: inherit;
}
Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.
Demo: http://jsfiddle.net/ozr598jb/3/