Missing horizontal scrollbar

Whenever the last column is given a fixed width, e.g. 50 rather than *, which is necessary when the sum of the column widths will exceed the width of the

element being allocated to hold the grid (in which case horizontal scrollbars will be required for the grid), then no horizontal scrollbar appears whenever the vertical scrollbar is not required, for example when the number of rows being displayed fit within the vertical space allocated to the grid’s div element.

Some additional information: This may in part be my problem due to an inconsistent call. I wrote a JavaScript convenience class that creates grid objects with a simplified interface. In the bowels of this class is a call to enableAutoWidth specifying no max_limit on the width of the grid. Because I did want to constrain the grid to a fixed width, I then had to specify a max-width css style on the enclosing

element. If I remove the call to enableAutoWidth, then I can get away with simply specifying a width css style and a horizontal scrollbar always appears regardless of whether there is a vertical scrollbar or not.

Unfortunately your issue is not clear. Could you please, clarify it with the screenshots or the code snippet.

I’ll make it very simple: In the the latest standard grid download, dhtmlxGrid_v51_std.zip, look at the sample program samples/dhtmlxGrid/08_filtering/06_pro_search.html. There is a call:


on line 18.
If you want to force the grid to use a smaller horizontal width than the sum of all the column widths and thus have to use a horizontal scrollbar, then you would need to comment out this line and set the

width to something smaller, say 400px, in line 40:
<div id="gridbox" style="width:400px; height:450px; background-color:white;"></div> <!-- originally width: 1000px; -->

If you do this and then run the sample, set an Author filter of “Author at the end” so that only one row is selected in the grid. You will still have the horizontal scrollbar, as you should. But, if you do not comment out the call to enableAutoWidth(true), then to force the width to be 400px, you must code the

using max-width:
<div id="gridbox" style="max-width:400px; height:450px; background-color:white;"></div> <!-- originally width: 1000px; -->

Then you will not get a horizontal bar when the grid no longer has a vertical scrollbar, which will be the case when there is only one row in the grid.

The complete code of the example:


Search box

Search box

You can set search box in grid's hearder for each column.
Type requested information in input field and the row with a suggestion will be highlighted.


Please, try to use the
instead of max-width property.

Your suggestion to use mygrid.enableAutoWidth(true, 400) might work and obviate having to use max-width in the sample program I included that illustrates the issue – but it misses the point of the original post which was:

I had a façade “class” that provided a simplified interface to the dhtmlXGridObject “class” which contained a call to enableAutoWidth(true) inside it. I certainly could not modify this as you suggested without effecting all the client code that uses this class, so I had no choice but to use max-width. I then discovered that I was not getting a horizontal scrollbar whenever the grid was only partially filled (i.e. whenever there was no need for a vertical scrollbar). I had no choice but to remove the call to enableAutoWidth altogether, not an entirely satisfactory solution.