How to set columns width in laravel-datatables-oracle

Petro Gromovo

Hi all,
In my laravel 5.7 application I use "yajra/laravel-datatables-oracle": "~8.0" library and I try to set columns width for grid with a lot of columns
setting styles as :

#get-client-dt-listing-table th:first-child {
  width: 2% !important;
  background: maroon !important;
  color: brown !important;
}
#get-client-dt-listing-table th:nth-child(2) {
  width: 30% !important;
  background: yellow !important;
  color: blue !important;
}
#get-client-dt-listing-table thead th:nth-child(3) {
  width: 20%;
  background: red !important;
  color: green !important;
}
#get-client-dt-listing-table thead th:nth-child(4) {
  width: 10%;
  background: maroon !important;
  color: brown !important;
}
#get-client-dt-listing-table thead th:nth-child(5) {
  width: 10%;
  background: yellow !important;
  color: blue !important;
}
#get-client-dt-listing-table thead th:nth-child(6) {
  width: 10%;
  background: maroon !important;
  color: brown !important;
}
#get-client-dt-listing-table thead th:nth-child(7) {
  width: 10%;
  background: yellow !important;
  color: blue !important;
}
#get-client-dt-listing-table thead th:nth-child(8) {
  width: 10%;
  background: maroon !important;
  color: brown !important;
}
#get-client-dt-listing-table thead th:last-child(9) {
  width: 4%;
  background: yellow !important;
  color: blue !important;
}
#get-client-dt-listing-table thead th:last-child{
  width: 4%;
  background: red !important;
  color: green !important;
}

and having blade file :
@extends($current_admin_template.'.layouts.backend')

        @section('content')
            {{ csrf_field() }}


            @inject('viewFuncs', 'App\library\viewFuncs')

            <!-- Page Content : Clients index -->
            <div id="page-wrapper" class="card">

                @include($current_admin_template.'.layouts.page_header')

                <section class="card-body content_block_admin_clients_wrapper ">

                    <h1 class="card-title">Manage Clients</h1>


                    <div class="form-row offset-1">


                        <div class="col-xs-12 col-sm-4 mb-3">
                            {!! $viewFuncs->text('filter_name', '', "form-control editable_field string_input ", [ "autocomplete"=>"off", 'placeholder'=> 'Enter search string' ]         ) !!}
                        </div>

                        <div class="col-xs-12 col-sm-4 mb-3 mt-1 pl-2">
                            <input type="submit" class="btn btn-primary" value="Search" onclick="javascript:backendClient.runSearch(oTable); return false;" id="btn_run_search">
                        </div>

                        <div class="col-xs-12 col-sm-4 mb-3 mt-1 pl-2 pr-2">
                            <button type="button" onclick="javascript:document.location='/admin/clients/create'" class="btn btn-primary float-right">
                                <span class="btn-label"><i class="fa fa-plus"></i></span>&nbsp;Add new client
                            </button>&nbsp;&nbsp;
                        </div>

                        <div class="table-responsive dataTables_header">
                            <table class="table table-bordered table-striped text-primary" id="get-client-dt-listing-table">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Full Name</th>
                                    <th>Lead Type</th>
                                    <th>Customer Type</th>
                                    <th>Account Type</th>
                                    <th>PO box</th>
                                    <th>Office fax </th>
                                    <th>111</th>
                                    <th>234</th>
                                </tr>
                                </thead>
                            </table>


                        </div>

                    </div>

                </section>  <!-- class="card-body" -->

            </div>
            <!-- /.page-wrapper Page Content : Clients index -->


        @endsection


        @section('scripts')

            <link rel="stylesheet" href="{{ asset('/css/jquery.dataTables.min.css') }}" type="text/css">
            <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
            <script src="{{ asset('js/mustache.min.js') }}"></script>

            <script src="{{ asset('js/'.$current_admin_template.'/client.js') }}{{  "?dt=".time()  }}"></script>

            <script>
                /*<![CDATA[*/

                var oTable
                var backendClient = new backendClient('list',  // must be called before jQuery(document).ready(function ($) {
                    <?php echo $appParamsForJSArray ?>
                );
                jQuery(document).ready(function ($) {
                    backendClient.onBackendPageInit('list')
                });

                /*]]>*/
            </script>


        @endsection

As I see my css styles arew applied(by colors to in styles ) but not width.
You can to look at it live : http://demo2.nilov-sergey-demo-apps.tk/admin/clients
It is under credentials admin@demo.com 111111

Why width are not applied and how to fix it?

Thanks!

allan

Since your post, it looks like you've added !important to the widths, which is allowing them to be picked up. Otherwise DataTables own auto width was overriding them (which attempts a best effort based on the content and styling together - the issue with that was that your selectors are too specific. DataTables clones the table and creates a "worst case" one, but removed the id, since two elements with the same id is not valid. So #get-client-dt-listing-table in the selector wouldn't work for the calculation table.

table.dataTable or some other class name is what I would normally recommend.

You can also use autoWidth to disable the auto width calculations.

Allan