Resize DIV to fit parent and have scroolbar, using CSS
I'm working on a ASP.NET app, but the issue is mainly with CSS
I have a table with 2 cells, and I want to have a scrollbar in he second cell
Something like:
Code:
<Table>
<tr>
<td>
1<br />
2<br />
3<br />
</td>
<td style="height: 100%; width: 400px;">
<div style="overflow: auto;">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
</div>
</td>
</tr>
</Table>
So I want the second cell to have the height of the first cell (the 3 items), and have a scrollbar to scroll up/down the 12 items.
I can't set a fixed height because the size of the first cell changes depending on content inside.
Re: Resize DIV to fit parent and have scroolbar, using CSS
If I understood correctly.
Something like this?
Code:
<Table width = "400" >
<tr>
<td style="height: 100%; width: 50px;">
1<br />
2<br />
3<br />
</td>
<td>
<div style="width:100%; max-height:50px; overflow-y: scroll">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
</div>
</td>
</tr>
</Table>
But note sure how you get the %height compared to the first cell height.
Could be done with JS probably, else I have to look this up.
Re: Resize DIV to fit parent and have scroolbar, using CSS
Back home.
So I've set some JS that will maintain the second cell- div equal to the 1st cellheight.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script>
function script(){
var tblId=document.getElementById('x');
var tblz=document.getElementById('z');
// This will get whatever height 1st cell has and put it on the second cell
tblz.setAttribute("style","width:100%;overflow-y: scroll;max-height: " + tblId.offsetHeight + "px;");
};
</script>
</head>
<body onload="script();">
<Table width = "400" >
<tr>
<td id='x' style="height: 100%;">
1<br />
2<br />
3<br />
4<br />
</td>
<td>
<div id='z' style="width:100%; max-height:5px; overflow-y: scroll">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
</div>
</td>
</tr>
</Table>
</body>
</html>
Re: Resize DIV to fit parent and have scroolbar, using CSS
Can i ask why your still using tables in 2019? there are far better ways to layout stuff in web pages
Re: Resize DIV to fit parent and have scroolbar, using CSS
Tables can center-align your items very easily or quick sum, so I wouldn't extricate them right away.
Re: Resize DIV to fit parent and have scroolbar, using CSS
Quote:
Originally Posted by
sapator
Back home.
So I've set some JS that will maintain the second cell- div equal to the 1st cellheight.
…...
After A LOT of googling, and a lot of trial & error, I ended up writing my own JavaScript that modifies the Width & Height on window resize:
Code:
<script type='text/javascript'>
function resizedw() {
var elements = document.getElementsByClassName("div_ctrl_Comments");
for (var i = 0; i < elements.length; i++) {
var inner_element = elements[i].getElementsByClassName("div_ctrl_Comments_inner")[0];
var cs = window.getComputedStyle(elements[i].parentElement, null);
elementHeight = elements[i].parentElement.clientHeight;
elementWidth = elements[i].parentElement.clientWidth;
elementHeight -= parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
elementWidth -= parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
inner_element.style.maxHeight = elementHeight + "px";
elements[i].style.height = elementHeight + "px";
elements[i].style.width = elementWidth + "px";
}
}
var doit;
window.onresize = function () {
clearTimeout(doit);
doit = setTimeout(resizedw, 100);
};
</script>
<Table>
<tr>
<td>
1<br />
2<br />
3<br />
</td>
<td style="width: 400px; vertical-align: top; padding: 5px 5px 5px 10px;">
<div style="position: absolute; height: 100%;" class="div_ctrl_Comments">
<div style="position: relative; max-height: 300px; overflow: auto; border: thin solid gray;" class="div_ctrl_Comments_inner">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
</div>
</div>
</td>
</tr>
</Table>
<script type='text/javascript'>
resizedw(); // resize controls for page load
</script>
So basically I set the parent div position absolute, and I change width & height through JavaScript, and the max-height in the inner div.
The DIVs are actually in a user control, and I am using the control 25 times in the page, so that's why it's looping...
Re: Resize DIV to fit parent and have scroolbar, using CSS
Quote:
Originally Posted by
NeedSomeAnswers
Can i ask why your still using tables in 2019? there are far better ways to layout stuff in web pages
Can I ask why we're still using VB6 in 2019 ? (but let's not go there)
I got used to it! I use them because I need thigs aligned on the page, and I didn't find good examples of these "better ways" you are talking about, can you give me some examples?
Re: Resize DIV to fit parent and have scroolbar, using CSS
Quote:
Originally Posted by
NeedSomeAnswers
Can i ask why your still using tables in 2019? there are far better ways to layout stuff in web pages
I found an interesting discussion here:
https://softwareengineering.stackexc...bles-with-divs
I'll consider using DIVs in my next app
Re: Resize DIV to fit parent and have scroolbar, using CSS
Quote:
I got used to it! I use them because I need things aligned on the page, and I didn't find good examples of these "better ways" you are talking about, can you give me some examples?
Sure i was really curious not a trick question or anything, tables are just a bit of a dated way to do a layout and dont work particularly well, also they dont really work responsively.
Divs and Flexbox are how people tend to do page layouts on web page today (along with Bootstrap)
w3schools do a pretty good job of explaining how to use Flexbox - https://www.w3schools.com/css/css3_flexbox.asp
