I want to set up a table within a scrollable area, but I also want to have a header row which does not scroll:
[Header One|Header Two]
[Row 1 / 1|Row 1 / 2]
[Row 2 / 1|Row 2 / 2]
[Row 3 / 1|Row 3 / 2]
I have this working, however the column widths between the header table and the scrollable table do not line up. I am currently trying to use the following:
for (int i = 0; i < headerColumnTable.getColumns(); i++)
{
headerColumnWidth = headerColumnTable.getColumnWidth( i );
mainColumnWidth = mainTable.getColumnWidth( i );
if (headerColumnWidth < mainColumnWidth)
headerColumnTable.columnDefaults( i ).width( mainColumnWidth );
else
mainTable.columnDefaults( i ).width( headerColumnWidth );
}
I cannot seem to affect the column width in any way.
I could fill the tables, get the columns widths, then clear the tables and refill them forcing the cell widths at that time, but this seems to be needlessly complex.
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 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
I am generating dynamic multicell with string. Like A, B, C etc. I want to center those multicell on the page. I need to make the $pdf->SetMargins() dynamic, which means it will automatically center itself when the content is loaded. This is a code I tried but something is wrong.
$pdfWidth = 210;
col = 9; // This is dynamic so it can be any value from 5-20;
$mar = (($pdfWidth + ($col * 8)) /2)/2;
$pdf->SetMargins($mar,0,0);
I'm not sure why you're dividing by 2 twice. If you take the total width of the page, minus the content and divide that by two you have your desired margin already. Also, don't forget to set the override parameter in SetMargins() to 'true'.
$pdfWidth = 210;
$col = 9;
$mar = (($pdfWidth - ($col*8)) /2); //Only one division by 2 is required
$pdf->SetMargins($mar,0,0, true); //the 'true' is necessary or it won't override the default margins
//VERY IMPORTANT that you set all the above BEFORE adding the page!
$pdf->AddPage();
//Content of page
Now any MultiCell with cell width of 8, as you provided in the example, should be perfectly centered on the page.
ColumnText.showTextAligned(cb, Element.ALIGN_CENTER, new Phrase(headerContent,headerFont) ,document.right() - 300, document.top() + 5, 0);
I have this line of code.For A4 papersize I get the header at the center of the page but for A3,A2,A1 I get it to the left of the page.What should I do so that I get it to the center of the page for all papersize(A4,A3,A2,A1).
You should use (document.left() + document.right()) / 2 for the x value.
As for the y value, you should use document.top() - (headerFont.getSize() * 1.5f). As far as I know document.top() + 5 results in adding text in the invisible area above the actual page.
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/