Problem with 100% table width

[stephanParticipant]

Hi,

When I create a jqxGrid with 100% table width the grid that gets created actually has a width of 100% + 2 pixels. Those two extra pixels probably come from the frame around the grid. Because of this I always get a horizontal scrollbar (for those 2 extra pixels) when placing the grid within an absolutely positioned and sized container.

I have created a jsFiddle (as a fork of a fiddle created by Peter Stoev) that demonstrates the problem within a simple absolute container: http://jsfiddle.net/M58LY/3/

My question is: do I have to code a workaround to compensate for those extra 2 pixels ? Or is this a bug within the jqxGrid width calculation mechanism that maybe can be fixed in a future version ?

Regards,
Stephan

[Peter StoevKeymaster]

Hi Stephan,

That is not a bug and is the way how a DIV tag is supposed to be sized when it has border. You have 2 options – disable the Grid’s border by setting inline CSS style – border: none or disable your container’s overflow by setting it to overflow: hidden. A third option is to change the DIV tag’s box-sizing.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[stephanParticipant]

Hi Peter,

Thanks for your answer. As a workaround I am placing the table within an outer container that has a 2 pixel margin. This ensures that no scrollbar appears.

However I found a second problem, which also appears to relate to the 100% width. Maybe you can also help me with this ?

If I enable paging for a table with 100% width and start resizing the browser window, there are certain “magic” sizes where an empty horizontal scrollbar will appear. I was able to reproduce this problem is jsFiddle by noting down such a “magic” width and setting it as absolute fixed width:

http://jsfiddle.net/M58LY/14/

The fiddle will show this empty horizontal scrollbar, and as far as I could find out the trigger that causes it is to set “pageable: true”, and to hit one of thsoe magic width numbers.

Regards,
Stephan

[Peter StoevKeymaster]

Hi Stephan,

We will investigate the reported behavior. Thank you for the feedback!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[stephanParticipant]

Hi yet again,

I found 2 more problems with the 100% width mode of jqxGrid:

1) Calling the function “$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’, ‘column’)” will destroy the 100% width. It will make the table larger or smaller, depending on column content.

My expectation is that a 100% width table shall always stay at 100% width. Therefore “‘autoresizecolumns’ should recalculate the column sizes without changing the overall table width.

2) The automatic column widthcalculation of jqxGrid producs strange results. Apparently it bases the width of a column solely on the width of the column header. In my table this means I end up with several very thin columns where the large data they contain is heavily truncated. on the other hand there are several extra wide columns which are mostly empty because they contain small (or no) data.

My personal impression is that it would be much better to take all column content into account when calculating the width percentage for a column. I do not know in advance how much data a table cell will contain (because the user enters this data). Therefore I must rely on the table to calculate appropriate column width based on the current content of the table cells in a column.

I do know that “autoresizecolumns” has a “cells” and “all” mode. But this absolutely maximizes the table width instead of balancing the columns within the 100% overall table width.

I guess what point 2) is all about is that I consider the automatic column width calculation in 100% width mode to do a bad job of properly balancing out the width of all the columns. Such a balancing algorithm should always (or at least optionally) take the content of all cells in a column into account when calculating the percentage width for the column.

Regards,
Stephan

[Peter StoevKeymaster]

Hi,

The Grid’s Width is not related to the Columns Widths. When it is necessary, and the columns overflow, the Grid will display scrollbars. That is by design. The Auto-Resize method takes the Columns Data into account(Cells + Header) and will auto-size Only the Columns(Cells + Header). That will not affect the Grid’s Width.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[stephanParticipant]

Hi Peter:

I created a fiddle to illustrate both my points:
http://jsfiddle.net/M58LY/32/

The first thing you see is that the “Adr” column is shown as the smallest of the 3 columns, despite containing the largest content. That is why I assume that coumn width is calculated based on header text size. Apparently it is smallest beacuse it contains the smallest column header text. You can verify this by changing the header ext to “Address”, which will result in a larger column size ( relative to the other 2 columns).

I observe the same effect in my application: if a column has a small header text it will become a very slim column, even though it contains rather large amounts of text, resulting in a very silly looking table (similar to the table in the fiddle where the Adr column looks rather silly).

Now click on the button and you will see what my second point refers to. Probably I should not have said that the table becomes smaller. It is the sum of all columns that becomes smaller than the grids outer boundary. Again the result really look silly because now the columns do not fill the table anymore. Maybe my expectation is not in line with how you design or define the jqxGrid, but for a grid with 100% width i would have expected upon button click that the columns resize to ensure that all column header show without truncation, but that the columns still fill the available 100% width of the grid.

I guess I am looking for a function to ensure that column headers do not get truncated, ie. uses that as min size for a column, but still destributes the columns appropriately across the available 100% width, so as not to waste space. The appropriate distribution of columns should take into account column content to ensure that columns with large content get allocated moe space than columns with little or no content.

Sorry for bothering you with all this, but right now I am battling against rather weird looking grids because of the issues I outlined above. I could show you a screenshot, but cant attach it to the forum posting. My main major issues are:
* column headers getting truncated unnecessarily event though there is enough width to show them
* column width not properly respecting column content so that columns with larger content show up really tiny (slim) just because of their header text

Regards,
Stephan

[Peter StoevKeymaster]

Hi,

The posted sample shows what is by design and the behavior from that code is expected. The reason is that you call the method with parameter “columns”. This means that it will fit to the “column headers”. Call it without parameter or with parameter “all” which is the default one.

$("#button").click(function () {
    $("#jqxgrid").jqxGrid('autoresizecolumns');
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts