www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem resizing table inside div as window changes

  1. #1
    Join Date
    Jun 2013
    Posts
    2

    Problem resizing table inside div as window changes

    I would like a table to change size so that the content fills as much of the browser window as possible. The table will have a minimum size and will never be empty. The windows will have scroll bars when the content fills it. As the window expands (under user control) the table height will increase. The table height will not increase past the height required to show all of its data; the extra space at the bottom will be empty.

    I have had some success at adjusting the div/table size, using a different method, but am having trouble using an external script. Issues are described at the bottom.

    HTML Code:
    <body onresize="resizetable()">
    <div id="wrapper">
    	<div id="header">
    	<!-- header stuff -->
    	</div>
    	<div id="page">
    		<!-- more div and content here -->
    		<div id="landingtexts">
    			<table id="filestable">
    			<!-- table filled by server -->
    			</table>
    		</div>
    		<!-- more div and content here -->
    	</div>
    	<div id="footer" style="clear:both;">
    	<!-- header stuff -->
    	</div>
    </div>
    </body>
    CSS:
    Code:
    #landingtexts
    {
    	padding:0px;
    	height:300px;
    	min-height:300px;
    	overflow-y:scroll;
    }
    
    #filestable
    {
    	height=auto;
    }
    Javascript:
    Code:
    function resizetable()
    {
    	// condition checking code
    	var divl = document.getElementById("landingtexts");
    	var tablef = document.getElementById("filestable");
    	var requiredht = divl.style.minHeight + window.innerHeight - scrollhts;
    	if (requiredht > tablef.style.scrollHeight)
    	{
    		// limit to table height
    		requiredht = tablef.style.scrollHeight;
    	}
    	divl.style.clientHeight = requiredht;
    }
    where scrollhts is a calculated var.

    Chrome's developer tools showed empty values for every (~450) settings inside divl.style so that divl.style.minHeight was 0 instead of 300. I had previously found that assigning divl.clientHeight, which shows a value, did not work.

    Any suggestions about how to get the required settings (minHeight or min-height) and setting the height so that it changes?

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    ...where scrollhts is a calculated var...
    in the code you posted this is an undefined var:

    [18.06.2013 0:15:33] JavaScript - file://localhost/C:/WebServers/home/localhost/www/WEBDEVELOPER.COM/table_resize.htm
    Event thread: resize
    Uncaught exception: ReferenceError: Undefined variable: scrollhts
    Error thrown at line 15, column 0 in resizetable() in file://localhost/C:/WebServers/home/localhost/www/WEBDEVELOPER.COM/table_resize.htm:
    var requiredht = divl.style.minHeight + window.innerHeight - scrollhts;
    called from line 1, column 0 in <anonymous function>(event) in file://localhost/C:/WebServers/home/localhost/www/WEBDEVELOPER.COM/table_resize.htm:
    resizetable()
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jun 2013
    Posts
    2
    Quote Originally Posted by Padonak View Post
    in the code you posted this is an undefined var:
    Code:
    // window scroll bar is not visible
    var scrollhts = document.getElementById("header").scrollHeight + document.getElementById("page").scrollHeight + document.getElementById("footer").scrollHeight;
    if (window.innerHeight > scrollhts)
    {
    	// above code goes here
    }
    I did not think its definition was required to understand the code. My mistake. There is also code outside of this that does other checks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles