dcsimg
Results 1 to 9 of 9

Thread: Resize DIV to fit parent and have scroolbar, using CSS

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Feb 2002
    Location
    Canada, Toronto
    Posts
    5,790

    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.

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,575

    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.
    Last edited by sapator; Oct 3rd, 2019 at 09:52 AM.
    Slow as hell.

  3. #3
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,575

    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>
    Slow as hell.

  4. #4
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,568

    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
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



  5. #5
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,575

    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.
    Slow as hell.

  6. #6

    Thread Starter
    PowerPoster
    Join Date
    Feb 2002
    Location
    Canada, Toronto
    Posts
    5,790

    Re: Resize DIV to fit parent and have scroolbar, using CSS

    Quote Originally Posted by sapator View Post
    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...

  7. #7

    Thread Starter
    PowerPoster
    Join Date
    Feb 2002
    Location
    Canada, Toronto
    Posts
    5,790

    Re: Resize DIV to fit parent and have scroolbar, using CSS

    Quote Originally Posted by NeedSomeAnswers View Post
    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?

  8. #8

    Thread Starter
    PowerPoster
    Join Date
    Feb 2002
    Location
    Canada, Toronto
    Posts
    5,790

    Re: Resize DIV to fit parent and have scroolbar, using CSS

    Quote Originally Posted by NeedSomeAnswers View Post
    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

  9. #9
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,568

    Re: Resize DIV to fit parent and have scroolbar, using CSS

    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
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width