Set Width in column not working

[rainyhuynh]

Good morning,

I have set up "width" in datatable but it is not working. Code is above:

<div class="table-responsive"> <%= render_datatable(@datatable, input_js: { responsive: false, colReorder: true, fixedHeader: true, autoWidth: false, scrollX: true, columnDefs: [ { "width": "10px", "targets": 0 }, { "width": "100px", "targets": 1 }, { "width": "100px", "targets": 2 }, { "width": "70px", "targets": 3 }, { "width": "70px", "targets": 4 }, { "width": "70px", "targets": 5 } ] }) %> </div> I also try to change { width: '20%', targets: 0 }, but not solve my problem. I used datatable in javascript it's working well before. $(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, columnDefs: [ { width: '20%', targets: 0 } ], fixedColumns: true } ); } );

Can you give me the solution for this?

Thank you very much. Rainy.

[danajanssen]

You should use CSS to set the width. Each column will have a class and id assigned when you view the datatable, so you can inspect them for the names and then do something like:

.col-date { width: 200px; }

[rainyhuynh]

Hi,

Sorry, I responded to be late. I have tried but not working col :name, label: "Lead name", col_class: "col-lead-name" CSS .col-lead-name { width: 500px; }.

I have also set up autoWidth: false but the same.

<%= render_datatable(@datatable, input_js: { responsive: false, colReorder: true, fixedHeader: true, autoWidth: false }) %>

Can you give me advice?

Thank you.

[danajanssen]

Please review the last sentence under the override_js docs: https://github.com/code-and-effect/effective_datatables#override-javascript-options

If you want to assign a custom class, do it the first way you mentioned via col_class: in your datatable DSL: https://github.com/code-and-effect/effective_datatables#col

Using CSS for table widths can be tricky due how tables render in browsers. You'll need to inspect the table cell/header to determine if the css rule is being applied. There are all kinds of edge cases like if you have long content inside a cell, if you define cells to be wider than the total available width, if you show too many columns at once, etc. You may need to also apply some word-break rules or append !important on some rules.

I'm afraid there isn't more I can say - your problem is outside the scope of effective_datatables and I won't fix your code for you. If you can show that class names aren't rendering on your rendered datatable, then please open a new ticket for that with repeatable instructions to replicate the bug (e.g. in a brand new rails app, using only the effective_datatables gem)

[rainyhuynh]

Hi Danajanssen,

Thanks for your reply. Let me try again.