Reputation: 523
I have a table that is generated dynamically using javascript and has rows appended to it using jQuery based on the contents of an array.
My problem is that I want to assign the table a maximum height using the css max-height
property so that after a certain height is reached, the table can be scrolled.
This is needed since the table might contain a large number of rows and it would then become too large.
I assigned the table a display: block
and a css max-height
property of 200px
but the property seems to be ignored. The table's height still extends beyond the maximum height set. Is there something I am missing?
Here is a stripped down version of my code that shows what I am want to do. I tried placing the table in a div like kuba suggested but it still doesn't work.
$(document).ready(function() {
$("#mylink").click(function()
{
var jsvCustomIcons = [ "images/img1.png","images/img2.png","images/img3.png","images/img4.png","images/img5.png","images/img6.png" ];
var mydiv = document.createElement("div");
$(mydiv).attr("id","mydiv");
var iconSettingsTable = document.createElement("table");
$(iconSettingsTable).attr("id","iconSettingsTable");
var tempTR,tempDescTH,tempDelTH;
var tempDescTD,tempDelTD,tempImg,tempImg2,tempBold;
tempTR = document.createElement("tr");
$(tempTR).addClass("selectorRowHeader");
tempDescTH = document.createElement("th");
$(tempDescTH).addClass("selectorColHeader");
$(tempDescTH).html("Description");
tempDelTH = document.createElement("th");
$(tempDelTH).addClass("selectorColHeader");
$(tempDelTH).html("Delete");
$(tempTR).append(tempDescTH);
$(tempTR).append(tempDelTH);
$(tempTR).css("background-color","#d3d3d3");
$(iconSettingsTable).append(tempTR);
for(i=0;i<jsvCustomIcons.length;i++)
{
tempTR = document.createElement("tr");
$(tempTR).addClass("selectorRowData");
tempDescTD = document.createElement("td");
$(tempDescTD).addClass("selectorColData");
tempBold = document.createElement("b");
$(tempBold).html(jsvCustomIcons[i]);
$(tempBold).addClass("iconDescriptionTexts");
tempImg2 = document.createElement("img");
$(tempImg2).attr(jsvCustomIcons[i]);
$(tempImg2).addClass("iconDescriptionImages");
$(tempDescTD).append(tempBold);
$(tempDescTD).append(tempImg2);
tempDelTD = document.createElement("td");
$(tempDelTD).addClass("selectorColData");
tempImg = document.createElement("img");
$(tempImg).attr("id","delImage" + i);
$(tempImg).attr("src","images/delete.png");
$(tempImg).css("margin-top","5px");
$(tempImg).click(function()
{
// Code to handle clicks
});
$(tempDelTD).append(tempImg);
$(tempTR).append(tempDescTD);
$(tempTR).append(tempDelTD);
$(iconSettingsTable).append(tempTR);
}
$(iconSettingsTable).css({"position":"absolute","top":$("#iconSettingsSpan").position().top + 20,"left":0});
$(mydiv).append(iconSettingsTable);
$("body").append(mydiv);
});
});
#mydiv {
max-height: 200px;
overflow-y: scroll;
}
#iconSettingsTable {
border: 2px solid black;
}
.selectorColData {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='iconSettingsSpan'>
<a class='link' style='cursor:pointer;' id='mylink' >Click for Icon Table</a>
</span>
Upvotes: 1
Views: 1769
Reputation: 288120
First, it's important to note that setting max-height
directly to the table is unreliable:
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
Therefore, as you already did, the solution is setting it to a non-tabular parent.
But there is a problem with your approach: your table has position: absolute
, so it's taken out of the flow, and thus the height of the parent div
is 0
. And even if you set an explicit height to it, overflow: scroll
won't work, because
['overflow'] affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.
In your case, since the table is positioned its containing block isn't the parent div
:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'
Therefore, to make it work you need to remove table's position: absolute
, or set a position
different than static
to the parent div
.
Upvotes: 0
Reputation: 523
As an update, it seems that if I set the div's position to absolute, it works. My problem was that I was setting the table's position to absolute. Here is an updated jsfiddle:
Link: http://jsfiddle.net/e6gayjps/5/
Upvotes: 0
Reputation: 51
Its because of the "position: absolute" property of that table
Remove that from jquery code (line no 62 )
or use this
#iconSettingsTable
{
border: 2px solid black;
position : static !important;
}
or use this
#mydiv
{
max-height:100px;
overflow-y:scroll;
position : relative;
}
Upvotes: 0
Reputation: 669
Line 62 of the JavaScript change to position:auto https://jsfiddle.net/tonytansley/dmu5wrd0/
$(iconSettingsTable).css({"position":"auto","top":$("#iconSettingsSpan").position().top + 20,"left":0});
Upvotes: 1