js-grid output height restriction issues - Cannot control overflow of output

Question

I am currently using js-grid to surface data returned from a database query as part of a web application. All features seem to operate as I would like; however, when the data returned leads to the height of the overall grid being greater than that of the parent element it "overflows".

For example, it should look like:

but, with enough data, I'm getting:

I have set the height value in the jsGrid call to that of the container element, as well as trying to set a height and max-height css value using both css and jQuery. I've also added an overflow of scroll and auto, to no effect.

function surfaceDataGrid(message, recipient) {
var fieldData = JSON.parse(message.Data);
activeRequests.splice(0, activeRequests.length);
var columns = getColumns(recipient);
var Columns = columns.list.length;
var recipientElement = '#' + recipient;
var gridHeight = $(recipientElement).height();
var gridWidth = $(recipientElement).width();
$(recipientElement).html('<div id="jsgrid"></div>');
if (fieldData.length !== 0) {
    loggingAction('log', 'NOTIFICATION : Query returned ' + fieldData.length + ' rows of data. ');
    $(recipientElement).children('#jsgrid').jsGrid({
        data: fieldData,
        editing: false,
        fields: eval(columns),
        height: gridHeight,
        inserting: false,
        pageindex: 1,
        pagesize: 1,
        paging: false,
        selecting: "true",
        sorting: true,
        width: gridWidth,
    });
    var Rows = ($('.jsgrid-table tbody tr').length) - 3;
    $('.jsgrid-table').removeAttr('style');
    var gridheight2 = (gridHeight - 28) + "px";
    var headerwidth = (gridWidth / Columns) + 'px';
    $('.jsgrid-header-cell').width(headerwidth).width('28px');
    $('.jsgrid-grid-body').css('margin-top', '28px');
    $('.jsgrid .jsgrid-grid-body').css('height',gridheight2);
    $('.jsgrid-table').width(gridWidth + 'px');
    $('.jsgrid-grid-body .jsgrid-table').width(gridWidth + 'px').height(gridheight2 + 'px');
    $('.jsgrid-row').attr("tabIndex", "1");
    $('.jsgrid-alt-row').attr("tabIndex", "1");
}
else {
    $(recipientElement).children().remove();
    $(recipientElement).append('<div id="jsgrid"><h2 class="errorMessage" style="padding:1em;text-align:center;">No data returned.<br> Please resubmit!</h2></div>');
    $(recipientElement).fadeIn(fadeINtiming);
    loggingAction('log', 'NOTIFICATION : Query returned no data.');
}
$('tr').click(function () {
    var instantVariable0 = $('.jsgrid-header-row').parent().children()[0];
    var selectedType0 = $(instantVariable0).text();
    var instantVariable1 = $(this).parent().children()[0];
    gridValueSelected = $(instantVariable1).text();
    loggingAction('log', 'NOTIFICATION : A cell has been clicked');
    loggingAction('info', 'INFORMATION : Agent has selected ' + selectedType0.split(' ')[1] + ' value of "' + gridValueSelected + '".');
    $(this).addClass('selectedRow').siblings().removeClass('selectedRow');
});

}

When you inspect the parent element, are these height and overflow properties being overriden or they won't even pick up? — Syden, Aug 03 '17 at 15:14
they are appearing in developer console as I am applying using jQuery, I have tried applying them directly in the console in DOM explorer but they don't seem to make any difference — Allan Macritchie, Aug 03 '17 at 15:25
BTW - The target audience are IE users so my teting is using IE11 and Edge although the same results appear in Chrome — Allan Macritchie, Aug 03 '17 at 15:26
Thanks, last one, have you tried setting it's parent container as `position:relative;` ? — Syden, Aug 03 '17 at 15:27
Can you make a plunkr / codepen? Very difficult to diagnose without seeing the code in process — joshua miller, Aug 03 '17 at 15:29
Syden, it seems to happen on all browsers so sorry if my comment above was misleading. Also I have also tried changing each layer of parent as position:relative to no effect — Allan Macritchie, Aug 03 '17 at 15:30
As everything in the DOM is rendered using JS logic it isn't feasible to create an effective codepen. Sorry — Allan Macritchie, Aug 03 '17 at 15:37
Add a working jsFiddle please. I'll do my best to help you. I don't mind having fake data in the grid. Just want to see your ploblem in a running website. — Jorge Fuentes González, Aug 03 '17 at 18:42

score 2 · Accepted Answer · answered Aug 04 '17 at 03:54

Here you go with a solution https://jsfiddle.net/kL291xp5/39/

var data = [];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
        paging: false,
        autoload: true,
 
        fields: [
            { name: "Date", type: "textarea", width: 150 },
            { name: "User", type: "textarea", width: 150},
            { name: "Comment", type: "textarea", width: 150}
        ]
    });
    
$('button').click(function(){
 var comment = $('#comment').val().trim();
  if(comment.length > 0){
   data.push({
     Date: new Date(),
      User: 'ABC',
      Comment: comment
    });
    
    $("#jsGrid").jsGrid({
      controller: {
         loadData: function() {
           return data;
          }
        }
    });
    
    $('#comment').val('');
  }
});

.jsgrid-cell { 
    overflow: hidden; 
}

#comment{
  width: 300px;
  height:100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<div id="jsGrid"></div>

<textarea id="comment"></textarea>
<button type="submit">Add Comments</button>

Shaaditya, I eventually found after looking at your fix ( which in itself would be correct) that I needed to add css values using jQuery to jsgrid-grid-body> jsgrid-table of position: absolute and overflow:auto — Allan Macritchie, Aug 04 '17 at 11:42

js-grid output height restriction issues - Cannot control overflow of output

1 Answers1