I am newbie to front-end who is using bootstrap and can't really figure out how to achive this effect:
I talk about row with table and hidden div. Table is 100% width and when hidden div appears after button is clicked, table will resize to 60-70% and rest of width will be for div. When I close div(makem it hidden), then table will back to 100% width.
Could you help me please to understand how should I do it the most common and correct way?
Here! Without AngularJs. You could add some animation to make it more fluid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="script.js"></script>
<style>
body{
margin: 0;
padding: 0;
overflow: hidden;
}
table{
margin: 0;
padding: 0;
background: grey;
float: left;
}
table tr, td, th{
margin: 0;
padding: 0;
}
#divToResize{
width: 0;
height: 100px;
margin: 0;
padding: 0;
background: blue;
float: left;
color: white;
}
</style>
<script>
'use strict';
let resized = false;
function resize(){
if (resized === false){
document.getElementById("tableToResize").style.width = "60%";
document.getElementById('divToResize').style.width = "40%";
resized = true;
} else{
document.getElementById("tableToResize").style.width = "100%";
document.getElementById('divToResize').style.width = "0";
resized = false;
}
}
</script>
</head>
<body>
<div id="container">
<table cellpadding="0" style="width: 100%;" id="tableToResize">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</table>
<div id="divToResize">
I love Food
</div>
<button onclick="resize()">Resize</button></div>
</body>
</html>
Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically - for ex. ng-class - use when the set of CSS styles is static/known ahead of time
Here is simple way to change width of table cell, after click :
<button ng-hide="click" ng-click="click = true">click</button>
<button ng-hide="!click" ng-click="click = false">click</button>
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in data">
<td >
{{data.person}}
</td>
<td style="background:grey" ng-class="{after_click_width: click}">
{{data.person}}
</td>
</tr>
</tbody>
</table>
style:
.after_click_width {
width: 70%
}
working plunker: http://plnkr.co/edit/DuxbZFZbUpjU2BSLlpm2?p=preview
