I have an infragistics Ignite Grid, with horizontal and vertical scroll bar. All is fine, except when viewing the page from a Panasonic CF31 with Firefox 24. In this case the vertical scroll bar disappears. I can put the grid inside a div and using overflow can have scrollbars that way, but its not desrireable because the header 'scrolls away'.
Anyone have an idea how I can debug this?
Device resolution Div Scroll Infragistics Scroll
Desktop 1024x768 works works
CF31 1024x768 works no vertical scroll bar
CF30* 1024x768 works works
<div id="GridWrapper" data-bind="visible:EventDataRetrieved" >
<table id="eventsGrid" data-bind="igGrid: {dataSource: eventData, responseDataKey: 'Records', autoGenerateColumns: false, autoGenerateLayouts: false, height:'350', width:'950', renderCheckboxes: true,autoCommit:true,primaryKey:'row_id',
features:
[
{
name : 'Resizing',
},
name: 'GroupBy',
featureChooserText:'features',
groupByAreaVisibility:'top',
modalDialogHeight:200
name: 'Selection',
mode: 'row',
multipleSelection: true,
rowSelectionChanged: onRowSelected
name: 'Sorting',
type: 'local'
}
,
name: 'Tooltips',
tooltipShowing : function(evt, args)
columnSettings: [
{ columnKey: 'has_footprint', allowTooltips: true },
{ columnKey: 'entry_tstmp', allowTooltips: true }
],
visibility: 'always',
showDelay: 1000,
hideDelay: 500
{ name: 'Updating', enableAddRow: false, enableDeleteRow: false, editMode: 'none',
columnKey: 'footprint_avail',
editorOptions: { readOnly: 'true' }
columnKey: 'entry_tstmp',editorOptions: { readOnly: 'true' }
columnKey: 'group_name', editorOptions: { readOnly: 'true' }
columnKey: 'sub_name',editorOptions: { readOnly: 'true' }
columnKey: 'loc_name', editorOptions: { readOnly: 'true' }
columnKey: 'ev_cfg_desc', editorOptions: { readOnly: 'true' }
columnKey: 'manu_name',editorOptions: { readOnly: 'true' }
columnKey: 'model_num', editorOptions: { readOnly: 'true' }
columnKey: 'mech_val', editorOptions: { readOnly: 'true' }
columnKey: 'ctr_voltage_val',editorOptions: { readOnly: 'true' }
columnKey: 'event_note_count', editorOptions: { readOnly: 'true' }
]
columns: [
{key: 'entry_tstmp', headerText: 'Time Stamp', width: 120, dataType: 'date', format: 'M/d/yyyy HH:mm:ss tt' },
{key: 'group_name', headerText: 'Group Name', width: 60, dataType: 'string'},
{key: 'sub_name', headerText: 'Sub Name', width: 100, dataType: 'string'},
{key: 'equipment', headerText: 'Equipment', width: 100, dataType: 'string'},
{key: 'loc_name', headerText: 'Breaker', width: 200, dataType: 'string'},
{key: 'ev_cfg_desc', headerText: 'Event', width: 50, dataType: 'string'},
{key: 'manu_name', headerText: 'Mfg', width: 50, dataType: 'string'},
{key: 'model_num', headerText: 'Model', width: 100, dataType: 'string'},
{key: 'mech_val', headerText: 'Mech', width: 100, dataType: 'string'},
{key: 'mech_op_val', headerText: 'Mech Op', width: 100, dataType: 'string'},
{key: 'ctr_voltage_val', headerText: 'Battery', width: 100, dataType: 'string'},
{key: 'event_comments', headerText: 'Event Notes', width: 100, dataType: 'string',
template: '<input type=\'button\' value=\'${event_comments}\' data-id=\'${ev_hdr_id}\' class=\'cmdbtngrid\' onclick=\'model.eventNote(this)\'/>'},
{key: 'asset_comments', headerText: 'Breaker Notes', width: 100, dataType: 'string',
template: '<input type=\'button\' value=\'${asset_comments}\' data-id=\'${equipment}\' class=\'cmdbtngrid\' onclick=\'model.assetNote(this)\'/>'},
{key: 'footprint_avail', headerText: 'Has Footprint', width: 100, dataType: 'bool'},
{key: 'closes_wo', headerText: 'Closes Work Order', width: 100, dataType: 'bool'},
{key: 'sys_voltage_val', headerText: 'Sys kV', width: 50, dataType: 'number'},
{key: 'ev_hdr_id', headerText: 'Event Hdr Id', width: 80, dataType: 'number'},
{key: 'allow_change_wo', headerText: 'allow_change_wo', width: 80, dataType: 'bool', hidden:true},
{key: 'row_id', headerText: 'row', width: 80, dataType: 'number', hidden:true},
{key: 'device_id', headerText: 'Device', width: 80, dataType: 'string'},
{key: 'cfg_id', headerText: 'Cfg', width: 80, dataType: 'number'},
{key: 'trigr_ev_num', headerText: 'trigr_ev_num', width: 80, dataType: 'number', hidden:true},
{key: 'system_status', headerText: 'Status', width: 80, dataType: 'string'},
{key: 'wo_complete_val', headerText: 'wo_complete_val', width: 80, dataType: 'number', hidden:true},
}">
</table>
</div>
Hello jsspooner_mso,
I would suggest checking the developer tools just to confirm that all resources such as js or css files are successfully retrieved. Ensuring that there are no js exceptions thrown when loading the grid on the particular CF31 device would also help.
In the igGrid, the vertical scrollbar is actually located in a div which wraps the table holding the data - this is done to ensure that the fixed headers can be maintained. For this scenario in particular some possible causes may included an overflow:hidden css attribute being somehow applied on that div (the grid may be accessed using jquery by the class ui-iggrid-scrolldiv for the sake of testing) in which case there would be no scrollbar rendered. Another possibility is that some misalignment of the html elements occurs and the scrollbar is there, but gets tucked in beneath another element.
To check whether the scrollbar has been rendered, I would suggest checking if the div's scroll height is greater than its own height:
$(".ui-iggrid-scrolldiv")[0].scrollHeight > $(".ui-iggrid-scrolldiv").height()
That would reveal whether the scrollbar is being rendered. If it is not being rendered at all, I would suggest examining the CSS rules which are being applied.
Hope this helps. Please do not hesitate to contact me with any updates regarding this matter.
Thank you Peter.
What you say makes a lot of sense, you can see a space where a scrollbar belongs on the grid but its just not there.
I may have found the answer, at least I have something that works right now. I removed a references to normalize.js.
I have these tags in the header
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8">
<meta charset="UTF-8">
Previously I had the char set tag before the http-equiv tag.
Also I got rid of an overflow in the div which contains the table.
I will reply again later if things continue to work.