iggrid fixed header not aligned with row data

Hi,

I am setting height of iggrid to set fixed header with vertical scrolling, it is fixed the header, but its not aligned with row data, please refer to this snap.

Below is the code:

$(“#tblCheckInQueList”).igGrid({
primaryKey: “templateID”,
width: ‘100%’,
height: ‘170px’,
autofitLastColumn: false,
autoGenerateColumns: false,
renderCheckboxes: true,
dataSource: data,
showHeader: true,
multiSelection: {
enabled: true
},
columns: [
{ headerText: “AppTypeMapID”, headerCssClass: “”, key: “appTypeMapID”, dataType: “number”, columnCssClass: “”, hidden: true },
{ headerText: “TemplateID”, headerCssClass: “”, key: “templateID”, dataType: “number”, columnCssClass: “”, hidden: true },
{ headerText: “Select”, headerCssClass: “”, key: “select”, dataType: “bool”, columnCssClass: “”, hidden: true },
{ headerText: “Questionnaire(s)”, headerCssClass: “”, key: “questTemplate”, dataType: “string”, columnCssClass: “smd-font-color” },
{ headerText: “Portal”, key: “portal”, dataType: “boolean”, hidden: true },
{
headerText: “Portal”, key: “portal1”, dataType: “boolean”, unbound: true, columnCssClass: “text-left”,
formula: function displayStatus(data, grid) {
var ActiveStatus = null;
if (data[“portal”] == true) {
ActiveStatus = “<label class=’custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none’><input type=’checkbox’ name=’CheckInQuest_” + data[“templateID”] + “‘ class=’custom-control-input’ onclick=’activeChange(this)’ id=’chkPortalQI_” + data[“templateID”] + “‘ checked=’checked’ /><span class=’custom-control-label pmd-checkbox-ripple-effect’></span></label>”;
}
else {
ActiveStatus = “<label class=’custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none’><input type=’checkbox’ name=’CheckInQuest_” + data[“templateID”] + “‘ class=’custom-control-input’ onclick=’activeChange(this)’ id=’chkPortalQI_” + data[“templateID”] + “‘ /><span class=’custom-control-label pmd-checkbox-ripple-effect’></span></label>”;
}
return ActiveStatus;
}
},
{ headerText: “Clipboard”, key: “clipboard”, dataType: “boolean”, hidden: true },
{
headerText: “Clipboard”, key: “clipboard1”, dataType: “boolean”, unbound: true, columnCssClass: “text-left”,
formula: function displayStatus(data, grid) {
var ActiveStatus = null;
if (data[“clipboard”] == true) {
ActiveStatus = “<label class=’custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none’><input type=’checkbox’ name=’CheckInQuest_” + data[“templateID”] + “‘ class=’custom-control-input’ onclick=’activeChange(this)’ id=’chkClipboardQI_” + data[“templateID”] + “‘ checked=’checked’ /><span class=’custom-control-label pmd-checkbox-ripple-effect’></span></label>”;
}
else {
ActiveStatus = “<label class=’custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none’><input type=’checkbox’ name=’CheckInQuest_” + data[“templateID”] + “‘ class=’custom-control-input’ onclick=’activeChange(this)’ id=’chkClipboardQI_” + data[“templateID”] + “‘ /><span class=’custom-control-label pmd-checkbox-ripple-effect’></span></label>”;
}
return ActiveStatus;
}
},
{ headerText: “Both”, key: “both”, dataType: “boolean”, hidden: true },
{
headerText: “Both”, key: “both1”, dataType: “boolean”, unbound: true, columnCssClass: “text-left”,
formula: function displayStatus(data, grid) {
var ActiveStatus = null;
if (data[“both”] == true) {
ActiveStatus = “<label class=’custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none’><input type=’checkbox’ name=’CheckInQuest_” + data[“templateID”] + “‘ class=’custom-control-input’ onclick=’activeChange(this)’ id=’chkBothQI_” + data[“templateID”] + “‘ checked=’checked’ /><span class=’custom-control-label pmd-checkbox-ripple-effect’></span></label>”;
}
else {
ActiveStatus = “<label class=’custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none’><input type=’checkbox’ name=’CheckInQuest_” + data[“templateID”] + “‘ class=’custom-control-input’ onclick=’activeChange(this)’ id=’chkBothQI_” + data[“templateID”] + “‘ /><span class=’custom-control-label pmd-checkbox-ripple-effect’></span></label>”;
}
return ActiveStatus;
}
}
],

// Grid Settings
features: [
{
name: “RowSelectors”,
enableCheckBoxes: true,
enableRowNumbering: false,
checkBoxStateChanging: function (evt, ui) {
isFiredFromCheckboxCIQ = true;
var grid = $(“#tblCheckInQueList”).data(“igGrid”);
if (ui.newState.toLowerCase() == ‘off’) {
grid.dataSource.updateRow(parseInt(ui.rowKey), { portal: false, clipboard: false, both: false }, true);
$(ui.row[0]).find(“input[id^=’chkPortalQI’]”).prop(‘checked’, false);
$(ui.row[0]).find(“input[id^=’chkClipboardQI’]”).prop(‘checked’, false);
$(ui.row[0]).find(“input[id^=’chkBothQI’]”).prop(‘checked’, false);
}
else {
grid.dataSource.updateRow(parseInt(ui.rowKey), { both: true }, true);
$(ui.row[0]).find(“input[id^=’chkBothQI’]”).prop(‘checked’, true);
}
},
},
{
name: “Selection”,
mode: ‘row’,
persist: true,
multipleSelection: true,
activation: true,
rowSelectionChanging: function (evt, ui) {
schApptTypeIsChangesOnKeyup = true;
if (isFiredFromCheckboxCIQ) {
isFiredFromCheckboxCIQ = false;
}
else {
return false;
}
}
},
{
name: “Responsive”,
enableVerticalRendering: false,
},
{
name: “Sorting”,
type: “local”,
columnSettings: [
{
columnKey: “questTemplate”,
allowSorting: false,
},
{
columnKey: “portal1”,
allowSorting: false,
},
{
columnKey: “clipboard1”,
allowSorting: false,
},
{
columnKey: “both1”,
allowSorting: false,
}
]
},

]
});

Please help to fix this issue.

Thanks,

It could be bootstrap or some custom styles related to the sample

I tried it in the following fiddle. Please check it out. The headers are aligned as expected. Can you modify it and send it back with the misaligned headers?