Background color not appearing in free-jqGrid that is present in jqGrid 4.6.0 - jqgrid

Question

I am migrating existing jqGrid (4.6.0) to free-jqGrid (4.13.6 or later). Following two fiddles has same JavaScript and HTML – but one with 4.6.0 jqGrid and the other with free-jqGrid (4.13.6 for now)
jqGrid (4.6.0) Fiddle: https://jsfiddle.net/vth5wn64/2/
free-jqGrid (4.13.6) Fiddle: https://jsfiddle.net/vth5wn64/3/
The free-jqGrid does not have the required background color on the caption area. What is missing here? How to fix this?
JavaScript
function getCurrentPractice ()
{
return "Test";
}
function getGridCaption() {
return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
"<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
"<div style='float:right;width:550px; padding-bottom:20px;'>" +
"<input type='text' class='form-control' id='filter' placeholder='Search' style='width:250px; height:30px; float:right; ' />" +
" </div>" +
"</div>";
}
$(function () {
////Grid
var myData = [
{ "Practice": "Test1", "ProviderID": 1, "IsPartner": true, "IsActive": true },
{ "Practice": "Test2", "ProviderID": 2, "IsPartner": true, "IsActive": true }
]
var currentPractice = "P";
var grid = $("#list2");
grid.jqGrid({
datatype: 'local',
data: myData,
additionalProperties: ["IsActive", "IsPartner"],
//additionalProperties is needed since the name is different
postData:
{
practiceName: function () { return currentPractice }
},
colNames: [
'Practice',
'ProviderID'
],
colModel: [
{ name: 'Practice', width: 220 },
{ name: 'ProviderID', width: 320 }
],
ignoreCase: true,
loadonce: true,
rowNum: 25,
rowList: [15, 25, 35, 50],
pager: '#pager2',
viewrecords: true,
sortable: true,
caption: getGridCaption(),
beforeSelectRow: function (rowid, e) {
//Avoid selection of row
return false;
},
loadComplete: function () {
}
});
grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
//Filter Toolbar
//grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
$("#advancedSearch").click(function () {
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
//Top Search
$("#filter").on('keyup', function () {
var searchFiler = $("#filter").val(), f;
//alert(searchFiler);
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, { filters: "" });
}
f = { groupOp: "OR", rules: [] };
f.rules.push({ field: "Practice", op: "cn", data: searchFiler });
grid[0].p.search = true;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1, current: true }]);
});
});
HTML
<div style="float:left;">
<div id="divGrid" style="width: 680px; min-height: 50px; float: left;">
<table id="list2"></table>
<div id="pager2"></div>
</div>
</div>

Answer 1

First of all, both demos uses classes glyphicon, glyphicon-check and form-control. Thus I suppose that you use Bootstrap CSS additionally to jQuery UI CSS.
I'm not sure, which exact layout you want to have, but one thing is definitively a problem. You use inner divs with float:right inside of the capture (title) div. It's well known that the classic alignment of blocks using float property has the problem. One solves it typically by including some helper element (for example one more div) which has clear: both;. jQuery UI CSS contains ui-helper-clearfix class, which simplifies applying float wrapping properties to parent elements.
In short, you need just add additional
<div class='ui-helper-clearfix'></div>
at the end on the content, which you insert in the caption of jqGrid. See https://jsfiddle.net/vth5wn64/5/