Databases
StackOverflow2013
Postsdbo
POHow to get rid of horizontal scroll bar when not needed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get rid of horizontal scroll bar when not needed
    text
    copied!<p>I have jqGrid with two columns, one being hidden. For some reason in FireFox it shows a horizontal scroll bar like below:</p> <p><img src="https://i.stack.imgur.com/7vzXm.png" alt="enter image description here"></p> <p>as soon as i set the second column to show the scroll bar goes away like below: <img src="https://i.stack.imgur.com/y4HsM.png" alt="enter image description here"></p> <p>In IE this displays in the same manner accept that a vertical scroll is added to the first image. Think this has to do with the horizontal bar. If someone knows how to get rid of the horizontal bar without setting the height of the grid to anything other than 'auto' please let me know.</p> <p>my jqGrid setup script:</p> <pre><code>grid.jqGrid({ url: "/Availability/GetData", colNames: ['row_id', 'Availability'], colModel: [ { name: 'row_id', index: 'row_id', width: 20, hidden: false, search: false, editable: true, editoptions: { readonly: true, size: 10 }, formoptions: { rowpos: 1, label: "Id", elmprefix: "(*)"} }, { name: 'AVAILABILITY', index: 'AVAILABILITY', width: 75, sortable: true, hidden: false, editable: true, editoptions: { size: 20, maxlength: 20 }, formoptions: { rowpos: 2, label: "Availability", elmprefix: "&lt;span class='jqgridrequired'&gt;*&lt;/span&gt;" }, editrules: { required: true} } ], pager: pager, datatype: 'json', imgpath: '/Scripts/jqGrid/themes/redmond/images', jsonReader: { root: "Rows", page: "Page", total: "Total", records: "Records", repeatitems: false, userdata: "UserData", id: "row_id" }, loadtext: 'Loading Data...', loadui: "enable", mtype: 'GET', rowNum: 10, rowList: [10, 20, 50], viewrecords: true, multiselect: false, sortorder: "asc", height: 'auto', autowidth: true, sortname: 'AVAILABILITY', caption: 'Existing Availabilities' }).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false }, { height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (&lt;span class='jqgridrequired'&gt;*&lt;/span&gt;) are required", closeAfterEdit: true, url: "/Availability/Edit", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for edit {height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (&lt;span class='jqgridrequired'&gt;*&lt;/span&gt;) are required", closeAfterAdd: true, url: "/Availability/Create", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for add {reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, url: "/Availability/Delete" }, // delete instead that del:false we need this {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options {} //{height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/ ); enter code here </code></pre> <p>As you can see i am using the height: 'auto' so that when the user selects a much higher page count it will span down. I don't have this problem on other jgGrids which are displaying multiple columns. Only jgGrids that have one column shown.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload