I have two tables like so. These are floated:left to appear next to each other. I would like to have table 2 the same height as table 1. As in, the yellow background goes down to the bottom of table 1.
Currently:
Should look like:
I don't want to have to hard code pixels as it needs to display the same across different monitors and mobile devices.
Edit: I'll just give the last row a longer height. Thanks for your answers.
You can find out how many rows are in a table using this call (JavaScript, include it in a tag):
var x = document.getElementById("myTable").rows.length;
where "myTable" is the id of your left table.
Then set the number of rows in the second table to x by getting the current number of rows:
var y = document.getElementById("mySecondTable").rows.length;
where "mySecondTable" is the id of your right table.
var numRowsToCreate = x - y;
for(i = 0; i < numRowsToCreate; i++) {
var secondTable = document.getElementById("mySecondTable");
var newRow = document.createElement('tr');
//Set any attributes of the table row here, like background-color.
secondTable.appendChild(newRow);
}
Add class .row-eq-height to parent div:
CSS:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
DEMO
Related
I have a layout problem and I'm having trouble thinking of a solution.
This is part of a form and basically its a dynamic list of checkboxes and their labels. Based on the screen width its either in 1, 2, or 3 columns.
We're arranging in columns, like for 3 columns:
1 5 9
2 6 10
3 7
4 8
If they were static this would be easy to do with css columns... but the challenge is that these are part of a treeview where each item can expand to show more items:
With CSS columns (or flexbox columns with a set height) if you expand, say, "2017" it will push the dates below it into the next column which I believe would be confusing for the end user. So ideally when 2017 is expanded, it would push everything below it down instead of into the next column.
This can be almost achieved by using flexbox and flex-wrap... but the only issue is the order.
So I basically want flexbox rows functionality with ordering like columns. I'm not great at math so I was wondering if there's something that can be done purely with CSS... but otherwise I am open to javascript solutions as well, though it needs to be accessible.
And ideas?
Thanks.
I figured out a solution using CSS grids, grid-auto-flow: column;, and using Javascript to count the items I need to layout and inject it into some CSS into the document.
function injectStyles(rule) {
var reviewCount = document.querySelector("#tree-case-review-date .fancytree-container").childElementCount;
var reviewCountTwo = Math.ceil(reviewCount / 2);
var reviewCountThree = Math.ceil(reviewCount / 3);
var purCount = document.querySelector("#tree-pur .fancytree-container").childElementCount;
var purCountTwo = Math.ceil(purCount / 2);
var purCountThree = Math.ceil(purCount / 3);
var div = $("<div />", {
html: '<style>#media only screen and (min-width:700px) { #tree-case-review-date .fancytree-container { grid-template-rows: repeat(' + reviewCountTwo + ', auto);} #tree-pur .fancytree-container { grid-template-rows: repeat(' + purCountTwo + ', auto);}}#media only screen and (min-width:1000px) { #tree-case-review-date .fancytree-container { grid-template-rows: repeat(' + reviewCountThree + ', auto);}#tree-pur .fancytree-container {grid-template-rows: repeat(' + purCountThree + ', auto);}}</style>'
}).appendTo("body");
}
window.onload = function() {
injectStyles();
};
I think this is an ungodly mismash of jquery and normal javascript, so I need to learn how to clean this up.
I am displaying a table in html consisting of only a single column full name :
Full_name
Alex
Frown
Chris
Dram
Drex
Pheobe
I have used a for loop in to display the names. But i want the output to be displayed in two column distributed equally like:
Full_name Full_name
alex Frown
Chris Dram
Drex Pheobe
You can separate the names to two arrays, for example by index. If remainder of index divided by 2 is 0 push it to one array, otherwise push it to the other array.
let fullNamesArr...
let fullNamesLength = fullNamesArr.length;
let leftColumn = [];
let rightColumn = [];
for (let i = 0; i < fullNamesLength; i++) {
if (i % 2 === 0) {
leftColumnt.push(fullNamesArr[i]);
} else {
rightColumn.push(fullNamesArr[i]);
}
}
and then just display the two tables next to each other.
Or you can use styles.
Make a "header", with two divs with the same width (300px), both
containing the string Full_name.
Make container with width for example 600px. Give it a style of display: flex; flex-wrap: wrap;
In that container add the ngFor element and give it a 300px width.
(600 and 300 is an example)
It seems what i was trying to achieve could be simply done by css. Just give a css class to the tbody, in my case i named it split-table then add the following css:
<style type="text/css">
.split-table tr{
width: 50%;
float: left;
}
.split-table tr:nth-child(1n+2){
background: rgba(0,0,0,.1);
}
}
</style>
I have been working with creating a selection box around some cells, The selection box is absolute so it can reach everywhere it needs to, to create a click and drag box around some cells.
It seems that based on the mousedown event, the position of the box is set correctly for class hour but not for half-hour. While it is the same code, hour offset will return me the corrdinates of the item. relative to the doc, whereas the half-hour will return approx (0,6) which sets the top:left to the upper right corner.
Right now, my dom looks like this:
<div class="row">
<div class="cell hour">
<div class="half-hour"></div>
<div class="half-hour"></div>
</div>
</div>
and the CSS is:
.hour{
position:relative;
}
.half-hour{
display:inline-block;
float:left;
width: 50%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: solid 1px black;
width: 20px;
text-align: center;
cursor: pointer;
}
From what it looks like is that the offset I am getting when selecting the half-hour is the offset to the parent hour and the hour i think is getting his relative to the page?
After looking at these, I was thinking that setting half-hour to: *position:relative;` might do the trick, but it didnt do anything. it is the same.
I am thinking i need to modify something. im just not sure what.
I will eventually be doing this same design for a class called: quarter-hour which will have 2 in each of the half-hour divs.
Edit based on the question below, I just have a simple: ` which is on the page, and then on mousedown it would:
1- Set Top:Left values based on mouse.target.offsetTop && mouse.target.offsetLeft respectively.
2- Set position absolute (though it should be already)
3- set dimensions, Height and Width accordingly.
Edit 2 I managed to recreate my issue with this fiddle https://jsfiddle.net/838vqboe/ I am currently giving 3 options in the DDL. Hour works as expected, but not HH or QH.
I ended up coming up with a solution which worked in Javascript, but when converting it to Dart, specifically with Polymer, the concepts behind shadowdom was alien to me. This I think is the issue I was having as it was determining a local root it was applying positions to while the mouse gave me positions in relation to the screen.
To resolve this, I noticed that something which extends PolymerElement has get getBoundingClientRect(), so i ended up doing something like the following in javascript:
var _mouseDown = function(e){
var selectedHtml = e.target;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top
_selectionDiv.css({left:left, top:top});
}
$selection.on("mousedown", _mouseDown);
and in Dart:
Function _mouseDown(MouseEvent mouse){
HtmlElement selectedElement =- mouse.target;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left;
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top ;
_selectionDiv.style.top = "${top}px";
_selectionDiv.style.left = "${left}px";
}
I need to display some data in an HTML page in a three-column, tabular, enumerated environment, like this:
1. elephant animal a large animal that
eats leaves
2. fish animal an animal that
swims in the ocean
3. cactus plant a plant that lives
in dry places
No horizontal or vertical rules are necessary.
Each piece of data is in a left-aligned "box", so if any text needs to wrap, it still stays in its column.
Is there a clean HTML or CSS solution for presenting enumerated tabular environments?
You can make use of the CSS Counter functionality to auto-generate the numbers like shown in the below example:
table{
counter-reset: rows; /* initalize the counter variable */
}
tr{
counter-increment: rows; /* increment the counter every time a tr is encountered */
}
td{ /* just for demo */
vertical-align: top;
width: 100px;
}
td:first-child:before{ /* add the counter value before the first td in every row */
content: counter(rows) ". ";
}
Fiddle Demo
Note:
As per Can I Use, CSS Counters are supported by lower versions of IE also.
If the data is really tabular data as you have mentioned then there is nothing wrong in using the table elements itself.
We are doing a counter-reset whenever a table tag is encountered to make sure that each row in a new table always starts with 1. If the numbering has to continue into a data in another table, then we can reset the counter at the common parent's level (or if none then at body).
Tested in IE (v8 to v10), Firefox, Opera and Chrome and works exactly the same in all of them. JS Fiddle doesn't open properly in IE lower versions, so you can use this JS Bin sample for demo.
You can do this with CSS :
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
Demo fiddle
But I'd suggest JS:
var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';
console.log(text);
for (var i = 0, len = rows.length; i < len; i++){
rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}
Demo fiddle
Is there a way to autosize HTML table height based on content? Also if it's a cell (or cells) next to a neighbor cell with multiple rowspans.
E.g. if I have a table like this (cell on the right has Rowspan="2" and height of the cell content = 600px, in each cell on the left height of the cell content = 150px):
there is a gap between 2 cell consents on the left because cells themselves autosized their height. I'd like it to look like this:
Where top cells automatically collapse to cell content height. Is there anyway to achieve this?
This sets the last row of cells to the correct height (demo):
function grow(td) {
var table, target, high, low, mid;
td = $(td);
table = td.closest('table');
target = table.height();
low = td.height();
// find initial high
high = low;
while (table.height() <= target) {
td.height(high *= 2);
}
// binary search!
while (low + 1 < high) {
mid = low + Math.floor((high - low) / 2);
td.height(mid);
if (table.height() > target) {
high = mid;
} else {
low = mid;
}
}
td.height(low);
}
$('tr:last-child td').each(function() { grow(this); });
It should be trivial to convert this into plain JavaScript.
Update: For more complicated tables, you'll want to replace the last line with this (demo):
$.each($('td').get().reverse(), function() { grow(this); });
The idea is to call grow() on every cell, starting with the last row and working upwards.
considering table id="mytable" it would be:
$("#mytable").find("td").each(function(){
var ContentHeight = $($(this).html()).height();
$(this).height(ContentHeight);
});
at the end of the your page create a javascript code and let it do it for you:
<script type="text/javascript">
document.getElementById("idOfTd").style.height="100px";
</script>
I think it better create like this http://jsfiddle.net/miqdad/w9QYB/