Set column width

Karl53

The problem I'm having is I'm not able to set the fixed column width wide enough to avoid a horizontal scroll bar on the fixed column.

I've set the table width to 100%. I've tried setting the 'scrollX' to both 'true' and '100%'. Other columns do NOT have explicit widths set. The only column that has a width set is the fixed column (on the left) and regardless of the width I set in pixels, the column does not change width.

Other than this issue, everything works fine. What am I missing?

(This is on localhost, so it's presently not possible to link to an example.)

kthorngren

Sounds like you have the problem described in this thread. If this thread and the linked threads don't help then please build a test case replicating the issue. Otherwise it will be hard to say why you are having the extra scrollbar under the FixedColumns.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

My guess is trying to fix the width isn't going to solve the problem. Sounds like it might be something else.

Kevin

JuJoGuAl

Seems like y problem (i have a table with DYNAMIC columns) so when the page Load, Sorting or Filtering the Columns withs Breaks (scrollX: true, scrollY: '70vh', scrollCollapse: true) and i cant fix it!

https://datatables.net/forums/discussion/62307/after-sorting-columns-width-breaks-using-scroll

Karl53

I believe I have resolved my problem. It has nothing to do with fixed columns. My table's data source is a JavaScript array of arrays. The table is on a Bootstrap v4 tab control and the DataTable is initialized while the tab is hidden. I was calling rows().invalidate() in the tab's event handler. This was resetting the width I had assigned to the column. I made a few changes, but what I think fixed the problem was adding 'autoWidth': true to the DataTables initialization object. I also removed the width:100% on the table element.

kthorngren

The default for autoWidth is true. Unless you had it set false it might not be helping. However if you are using tabs then you will want to use columns.adjust(), as shown in this example to recalculate the column width when the tab is shown.

I also removed the width:100% on the table element.

This is how Datatables is able to calculate the width of the table. Likely you will want to put it back, especially if you use columns.adjust().

Kevin

JuJoGuAl

Well @Karl53 Firts im using ASP table (GridView) so the code is:

<div class="card-body">
    <div class="row">
        <div class="col-12">
            <div class="table-responsive">
                <asp:GridView ID="ID" ClientIDMode="Static" runat="server" AutoGenerateColumns="false" ShowHeader="true" ShowFooter="false" CssClass="table table-bordered table-hover" ShowHeaderWhenEmpty="true">
                </asp:GridView>
            </div>
        </div>        
    </div>
</div>

dataTable opciones (ordering,filtering, buttons) and

    scrollX: true,
            scrollY: '70vh',
            scrollCollapse: true,
            autoWidth: true,

in options i set the initComplete to adjust the columns (always on the page load the table seens broken)

initComplete: function () {
    jQuery(jQuery.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();

},

Second, i have two grids for example:

Grid A: with 24 Columns - n Rows

after filtering

Grid B: 13 Columns - n Rows

after filtering

Grid B Breaks to when use sorting

So exactly i dont know how to fix it!

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Karl53

@kthorngren I previously had had autoWidth set to false, and I was already calling columns.adjust().

So it seems a call to rows().invalidate() can cause columns to resize, and for the DataTable to use a column's explicitly set width, init autoWidth needs to be set to true and the table element should have its width attribute set. Do I understand the requirements correctly?

After testing above: I just added back the table width:100% and that breaks the layout. The only explicitly sized column (the FixedColumn) is too narrow. There is now an extra horizontal scrollbar below the FixedColumn. If I removing table width:100%, the column is sized properly. I'm good with this, but I thought I would mention it.

JuJoGuAl

@colin this is the test case, http://live.datatables.net/hobukaxu/3/edit but the BUG (in the test case) only happen when you filtering de table, but in my workspace, the bug happend when the table load (somethimes) when sorting (most of the time) when Filtering (most of the time)

colin

@JuJoGuAl I just tried that test case and couldn't reproduce the issue. Please can you provide steps on how to do so.

Colin

JuJoGuAl

@colin I use the Link, Turn Off (html,css,javascript) only Show output, then i wrote 1 2 3 then i delete then (in the filtering box) and the columns Breaks (size)

Like i said in the test case only happens when filtering data, but in the development case happens when the table load (page load) (sometimes), when sorting data (sometimes), when filtering data (most of the time)

allan

Initially a saw a boat in the preview, then refresh and see nothing. So I'm afraid I'm also unsure of how to use your test case to see the problem.

The issue you are seeing can be caused by using border-collapse: collapse on the table. Use the debugger to found out if that is the issue here - it has a suite of tests to find and report common errors).

Allan