This is a problem we are facing:  The horizontial scrollbar does not render when the grid height is set.  We want these features enabled:

- Grid height of 400px
- Fixed Headers
- Grid width of 100%
- If columns exceed the width, render a horizontal scrollbar.
- If data exceeds the height, render a vertical scrollbar.

The example is even broken in your JSFIDDLE.

http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/grid/overview-sample/

Go to the link and replace the grid declaration with the following grid below.  You will notice:

- vertical scrollbar is available.
- horizontal scrollbar is missing.
- Horizontal scrollbar appears if and only if you start to shrink the page by making the browser smaller.

This is a serious problem for us.  What work around do you have to fix this issue?

v14.2

IE11 + Firefox

$("#grid").igGrid({
                primaryKey: "ProductID",
                width: '100%',
                columns: [
                    { key: "Id", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "LocationId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "CustomerId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderLocationId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderStateId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "Customer", dataType: "object", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderLocation", dataType: "object", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderItems", dataType: "object", width: "50px", headerText: "blah", hidden: false },
                    {
                        key: "ShipDate",
                        dataType: "date",
                        format: "MM/dd/yyyy",
                        width: "75px",
                        headerText: "Ship Date",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return $.ig.formatter(record.Customer.ShipDate, "date", "MM/dd/yyyy", true, true, null);
                        }
                    },
                    {
                        key: "FreightCarrier",
                        dataType: "string",
                        width: "120px",
                        headerText: "Freight
Carrier",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.Customer.CarrierDescription;
                        }
                    },
                    { key: "PaymentType", dataType: "string", headerText: "Pre-Paid / Collect / 3rd Party Payment Terms" },
                    {
                        key: "LocationNumber",
                        dataType: "string",
                        width: "65px",
                        headerText: "PC #",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.OrderLocation.LocationNumber;
                        }
                    },
                    {
                        key: "ReferenceNumber",
                        dataType: "string",
                        width: "75px",
                        headerText: "PO or SO
or Ref #",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//
                            //var references = "";

                            //if (record.Customer.SalesOrderNumber) {
                            //    references = references + "SO: " + record.Customer.SalesOrderNumber + "\r\n";
                            //}

                            //if (record.Customer.PurchaseOrderNumber) {
                            //    references = references + "PO: " + record.Customer.PurchaseOrderNumber + "\r\n";
                            //}

                            //return references;
                        }
                    },
                    //{
                    //    key: "ProNumber", dataType: "string", headerText: "Pro Number",
                    //    width: "65px",
                    //    unbound: true,
                    //    formula: function (record, grid) {
                    //        return "";
                    //    }
                    //},
                    {
                        key: "ShipperName", dataType: "string", headerText: "Shipper
Name",
                        width: "120px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//
                            //return record.OrderLocation.LocationName;
                        }
                    },
                    {
                        key: "ShipperAddress", dataType: "string", headerText: "Shipper
Address",
                        width: "120px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.OrderLocation.ShippingAddress;
                        }
                    },
                    {
                        key: "ConsigneeName", dataType: "string", headerText: "Consignee
Name",
                        width: "95px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";// return record.Customer.ConsignedTo;
                        }
                    },
                    {
                        key: "ConsgineeAddress", dataType: "string", headerText: "Consignee
Address",
                        width: "120px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.Customer.Address1 + ' ' + record.Customer.Address2 ? record.Customer.Address2  : "";
                        }
                    },
                    {
                        key: "ConsigneeCity", dataType: "string", headerText: "Consignee
City",
                        width: "85px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.Customer.City;
                        }
                    },
                    {
                        key: "ConsigneeState", dataType: "string", headerText: "Consignee
State",
                        width: "65px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";// return record.Customer.State;
                        }
                    },
                    {
                        key: "ConsigneeZip", dataType: "string", headerText: "Consignee
Zip",
                        width: "75px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";// return record.Customer.Zip;
                        }
                    }
                ],
                autoGenerateColumns: false,
                dataSource: northwindProducts,
                responseDataKey: "results",
                autoCommit: true,
                height: "400px"                
            });
        });