Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grid & Dynamic Table's Height

I have a table that is created dynamically using Javascript / jQuery. The logic of which can be seen below:

$.each(input, function (key, value){

    let parent = $('<tr>');
    let container = $('<td>').text('Test');
    parent.append(container);
    table.append(parent);
 
});

Before I began creating the table dynamically I was able to have both a header and footer remain in view while having the table scroll when its height became too large. I did this with the following:

//HTML
<body>
  <div id="wrapper">

     <div id="header"></div>
     <table id="content"></table>
     <div id="footer"></div>

  </div>
</body>

//CSS
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 56px 1fr 100px;
}

#content {
   overflow-y: auto;
   overflow-x: auto;
}

Although now, with the dynamic table, neither my header nor my footer will stay in view while scrolling.

To attempt to fix this I tried resetting the CSS once my page was loaded but this was unsuccessful. How can I created a fixed/sticky header & footer while still keeping my table dynamic?

Edit: I am looking for a solution that doesn't require setting a static height for the table.

like image 515
Newb 4 You BB Avatar asked Jul 31 '20 15:07

Newb 4 You BB


People also ask

What do u mean by grid?

/ɡrɪd/ a pattern of horizontal and vertical lines that cross each other to make a set of squares. A grid is also a system of wires through which electricity is connected to different parts of a region: a power grid.

What is grid give example?

The definition of a grid is a pattern of horizontal and vertical lines spaced out at regular intervals, forming squares or rectangles. The lines on graph paper are an example of a grid.

What are the types of grid?

Four types of grid layouts can help you establish a well-balanced landing page. Use Block, Multicolumn, Modular, and Baseline grids to create a visual hierarchy on your page, and you are guaranteed to increase your conversions.


Video Answer


2 Answers

Can you try my below code , You should set height after rendering the innerhtml

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Code</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
<style>
//CSS
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 56px 1fr 100px;
}
.fixed{height::100px;
overflow:scroll;}

#content {

}
</style>
</head>

<body>
<div id="wrapper">

     <div id="header"></div>
     <table id="content" width="150px" border="1">
     <thead>
        <tr><th>Head</th></tr>
     </thead>
     <tbody>
        <tr>
            <td>
            <div class="fixed">
                <table  id="mybody"></table>
            </div>
            </td>
        </tr>
     </tbody>
     <tfoot>
        <tr><th>Foot</th></tr>
     </tfoot>
     </table>
     <div id="footer"></div>

  </div>
</body>
<script>
const arr=[ 1, 2, 3, 5, 6, 7, 10, 12, 17, 18];

jQuery(document).ready(function($) {

    var table = $("#mybody");
     $.each(arr, function (key, value){

        let parent = $('<tr>');
        let container = $('<td>').text('Test');
        parent.append(container);
        table.append(parent);
     
    });
    
    setTimeout(function(){
        table.parent().css({"height":"100px"});
    },100);
    
    
});
</script>
</html>
like image 176
Ajith Avatar answered Oct 19 '22 17:10

Ajith


CSS Only Solution

@Ajith's answer was good but I wanted to share the solution I will be using.

Notice If you have issues using this solution with MS Edge, your edge version may need to be updated.

First, I realized I had no <div> surrounding my table. Therefore the overflow would not work correctly. So I created an element around the table called table-container.

Second, all we need to do is add height : 100% to our table-container CSS.

//HTML
<body>
  <div id="wrapper">

     <div id="header"></div>
     <div id="table-container">
         <table id="content"></table>
     </div>
     <div id="footer"></div>

  </div>
</body>

//CSS
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 56px 1fr 100px;
}

#table-container {
   overflow-y: auto;
   overflow-x: auto;
   height: 100%;
}

var table = $("#content");

var input = [1,2,3,4,5,6,7,8,9,10,11,12];

$.each(input, function (key, value){

    let parent = $('<tr>');
    let container = $('<td>').text('Test');
    parent.append(container);
    table.append(parent);
 
});

var addRow = function(){
    let parent = $('<tr>');
    let container = $('<td>').text('Test');
    parent.append(container);
    table.append(parent);    
}
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#table-container {
   overflow-y: auto;
   overflow-x: auto;
   height: 100%;
}

#header, #footer{
    border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="wrapper">

     <div id="header">
        <button onclick="addRow()">Add Data</button>
     </div>
     <div id="table-container">
         <table id="content"></table>
     </div>
     <div id="footer"></div>

  </div>
</body>
like image 38
Newb 4 You BB Avatar answered Oct 19 '22 18:10

Newb 4 You BB