I'm trying to make a table let's say 400px height, and I want this value to never change when I modify the height of table rows with `Javascript? Is there any property that allows height of rows never to be bigger than a certain value?
I am not sure what exactly you are looking for. From your question I can guess that your table should not exceed more than 400px height even your total rows contains height more than 400px.
As per my understanding I would suggest you to put your table into div (having height of 400px and and overflow auto) as mentioned in below example :
<div style="max-height:400px;overflow:auto">
<table>
<tr style="height:500px">
<td>
Spider Code
</td>
</tr>
</table>
</div>
[Note: You can remove height from tr. I have put it just to indicate overflow.]
As per the above solution, if height exceeds 400px then scrollbar will be displayed.
And if you want your row height never exceed more than some pixels then set the max-height to row as mentioned below.
tr
{
max-height:20px;
overflow:hidden;
}
What ever you set in tr's height in javascript it is meaning less if it exist the max-height. so give max-height property to your tr which will restrict you tr to grow more than max-height.
use css max-height property for the table
tr{
max-height: 20px;
overflow:hidden;
}
table{
max-height:400px;
overflow:hidden;
}
Related
I'm interested in querying the maximum size that a DOM element in a browser might grow to be. It is well known that an empty DOM element (without styling) has .clientWidth of 0, but adding text/images/etc. to the element might cause its width to grow. Take for instance the DOM element thisOne in the structure below:
<table style="padding: 20px; border-spacing: 100px">
<tr>
<td></td>
<td>
<div id="thisOne"></div>
</td>
</tr>
</table>
Currently #thisOne.clientWidth === 0 but if I append a large amount of text to it, its width will grow and grow, but not until it reaches document.body.clientWidth because of the columns, padding classes, etc. I am wondering how I can figure out the current maximum width of the object without doing something like:
const thisOne = document.getElementById('thisOne');
thisOne.style.visibility = 'hidden'; // do not display to user.
thisOne.innerHTML = 'blah '.repeat(2000);
const maxWidth = thisOne.clientWidth;
thisOne.innerHTML = '';
thisOne.style.visibility = 'visible';
JQuery based answers are fine, though knowing a pure HTML/JS version would be better.
(In case anyone's wondering, I'm planning on placing an SVG of music notation into the div, but I want it to have nice wrapping onto additional lines by giving the renderer a width to fit before adding it)
What you can do is to set the width of the table to 100% (so it takes all the available space of the container). Set the desired width of the other columns (<td>), either fixed or %. And set the width of the column containing #thisOne to 100%, it will span to the remaining space available (<div> is a block, so it will use the whole width by default).
<table style="padding: 20px; border-spacing: 100px; width: 100%">
<tr>
<td style="width: 100px"></td>
<td style="width: 100%">
<div id="thisOne"></div>
</td>
</tr>
</table>
Now, #thisOne will take all the available space and you can get it's width with #thisOne.clientWidth.
If you don't want #thisOne to take the whole width by default (i.e., when it's empty), you can simply not set his container td width to 100% and do it by code before you get the #thisOne.clientWidth (but you will have to get the clientWidth in a setTimeout because the browser needs to compute the layout before the clientWidth is changed).
As 小聪聪到此一游 pointed out, you can also use display: flex and flex-grow to achieve the same goal.
<div style="display: flex">
<div style="flex-grow: 0"></div>
<div style="flex-grow: 1" id="thisOne"></div>
</div>
Seems like the easiest way would be to get the width of the parent e.g.
element.parentNode().clientWidth
a div will grow only to it's parent element. unless, of course, white-space: nowrap is specified.
EDIT: this doesn't work
Given:
<div class=gallery>
<div class=slider>...</slider>
</div>
with gallery having main css as overflow:hidden; positon:relative; and as an example width:1000px;
The slider then has "wider" content, stretching far beyond the width of the gallery which has a set width to 1000px here.
The problem is, calculating the slider width (using jQuery('.slider').outerWidth()) gives the same width as .gallery element, when overflow:hidden is used.
The only way to get slider to show it's actual width, is to use position: absolute on .slider
Problem with that is that now, .gallery will no longer expand it's height.
I have to somehow manually calculate (and keep track of) height to set on gallery. I do not know the height in advance of the contents of .slider.
Frankly, I don't get why .slider width can not be calculated unless position:absolute is used.
There might be a way to iterate child elements of .slider and possibly calculate the width of each child, but risks are the overflown children have width set to zero as well.
Anyone know a good workaround for this?
You could set slider width to
width:100%
with that, it will never go out of its parent width
slider.scrollWidth seems to do the trick and returns the same value as:
var total = 0;
$slider$.children().each(function(i, e){
e = jqr(e);
total += e.outerWidth(true)
})
return total;
Having specified table cell width <td style="width:100px"> when content width is more than 100px texts wraps to the next line.
How can we specify the cell width so that when content width is less than 100px, it should occupy 100px otherwise force the contents to expand horizontally.
use min-width:
<td style="min-width:100px">
I think you need min-width
<td style="min-width:100px">
kinda hard to explain, but let me try:
I'd like to put a table inside a container . this container has a fixed height, say 500px, and the table is rather long, say 2100 and each row's height can be different.
When the table is created, all the rows are invisible, now I want to do a calculation based on container's height to find out how many rows should appear inside the container. it could be first 15 rows, or first 17 rows (because some row's height is bigger).
After I do that, I let those rows stay there for some time, and hide them again, and do another calculation to fetch next page, and so on... Now the hard part it how do I do the calculation using jquery?
You can get the heights computed by the browser by using jQuery.innerHeight and jQuery.outerHeight functions. So you can first get the computed height of the container. Then you can iterate through rows and add their computed height until the sum is bigger than the container's computed height and so on..
Hope this helps.
This doesn't tackle the "stay for a while and fetch next set of rows after a while" part, but here's a simple calculation for heights that shows the appropriate rows.
http://jsfiddle.net/yvAtW/
JS
allowedHeight = $("div").height();
actualHeight = 0;
$("tr").each(function(){
actualHeight += $(this).height();
if(actualHeight < allowedHeight) {
$(this).show();
}
});
HTML
<div>
<table>
<tr class="height0">
<td>Row</td>
</tr>
<tr class="height1">
<td>Row</td>
</tr>
<tr class="height2">
<td>Row</td>
</tr>
<tr class="height1">
<td>Row</td>
</tr>
<tr class="height0">
<td>Row</td>
</tr>
</table>
</div>
CSS
div{
height:100px; /* fixed height container */
overflow:hidden; /* Ensures no overflowing content if JS doesn't work */
padding:10px 15px;
background:#777;
}
table{
width:100%;
}
tr{
display:none; /* all hidden by default */
}
/* different height trs */
.height0{
height:20px;
background:#900;
}
.height1{
height:30px;
background:#090;
}
.height2{
height:40px;
background:#009;
}
Iterate through the rows summing their height. Once you get over 500, take the set of rows except for the last row. Display those. Keep track of where you are at with some sort of marker, maybe a variable or a data- annotation.
perhaps you can do something like this:
fits = true;
while(fits){
$(table).append('<tr>...</tr>');
if($(table).css('height') >= $('#container').css('height'))
fits = false;
}
I have a 3 column layout that folds down to one column. I want to be able to move div's between the columns. The problem I have is a soon as a column is empty there is no way to move a div back into it.
see here (move all divs into one column): http://jsfiddle.net/65ENw/17/
Putting a fixed width on the columns solves this, but then my layout stops being responsive.
You can set a min-height and min-width on the columns and they will still occupy space when they have no widgets in them.
.widgetCol{ margin:0 1% 0 1%; width:98.0%; min-width:20px; min-height: 20px}
I have updated your fiddle to demonstrate: http://jsfiddle.net/65ENw/18/