Setting CSS of label and input in template

dynasoft

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi, How do I differentiate the css tags between the label and input in a fieldset editor-field. I have the following:

• css:
  .editorboxsize60 {
  width: auto;
  white-space: nowrap;*/
  float: left;
  width: 100%;
  padding: 5px 20px;
  clear: none;
  box-sizing: border-box;
  display: block;
  }

• Html:

I get the following displayed html:

How can I set the label and input's css tags separately so they don't overlap? Thanks.

rf1234

You seem to be forcing this behavior by some of your data table's settings (normally the labels have a line break). Can you please post a test case.

dynasoft

Hi, thanks.

My template code:

<fieldset class="PriceListDetails"> <div class="panel-body" id="divPriceListDetailsParametersTableBody"> <div class="tabbable tabs-below"> <div class="tab-content" id="tabParameters"> <div role="tabpanel" id="divMinMax" class="tab-pane fade"> <div class="panel panel-default scrollable250b"> <div class="panel-body"> <fieldset class="office editorboxsize60"> <editor-field name="VoicePriceLists.MinimumChargePeak"></editor-field> <editor-field name="VoicePriceLists.MinimumChargeOffPeak"></editor-field> <editor-field name="VoicePriceLists.MinimumChargeWeekEnd"></editor-field> <editor-field name="VoicePriceLists.MaximumChargePeak"></editor-field> <editor-field name="VoicePriceLists.MaximumChargeOffPeak"></editor-field> </fieldset> </div> </div> </div> </div> </div> </div> </fieldset>

Table code:

        `dataTable1 = $('#tblDataTable1').DataTable( {

            scrollY: 300,
            scrollX: true,
            responsive: true,
            destroy: true,
            order: [[0, 'asc']],
            processing: true,
            pageLength: 500,
            columnDefs: [
                { 'bVisible': false, 'targets': 0 },
                { 'targets': [0,1,2,3,4,5,6,7],
                    className: 'text-center'
                }
            ],
            dom: 'Bfrtip',                
            ajax: {
                url: '/PriceListDetails/XXX/',
                data: function (d) {
                    return $.extend( {}, d, {
                        strPriceListNme: strPriceListNme1,
                        lngContIdx: lngContIdx1
                    } );
                },
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                async: true,
                cache: false
            },
            columns: [
                { data: 'VoicePriceLists.id' ,
                    className: 'text-left'
                },
                { data: 'VoicePriceLists.MinimumChargePeak',
                    render: function ( data, type, row ) {
                        if (data == 0) {
                            return '';
                        }
                        return ManageDecimals(4, data);
                    },
                    className: 'text-left'
                },
                { data: 'VoicePriceLists.MinimumChargeOffPeak',
                    render: function ( data, type, row ) {
                        if (data == 0) {
                            return '';
                        }
                        return ManageDecimals(4, data);
                    },
                    className: 'text-left'
                },
                { data: 'VoicePriceLists.MinimumChargeWeekEnd',
                    render: function ( data, type, row ) {
                        if (data == 0) {
                            return '';
                        }
                        return ManageDecimals(4, data);
                    },
                    className: 'text-left'
                },
                { data: 'VoicePriceLists.MaximumChargePeak',
                    render: function ( data, type, row ) {
                        if (data == 0) {
                            return '';
                        }
                        return ManageDecimals(4, data);
                    },
                    className: 'text-left'
                },
                { data: 'VoicePriceLists.MaximumChargeOffPeak',
                    render: function ( data, type, row ) {
                        if (data == 0) {
                            return '';
                        }
                        return ManageDecimals(4, data);
                    },
                    className: 'text-left'
                }
            ],
            select: true,
            buttons: [
                { extend: 'create', editor: editor1 },
                { extend: 'edit', editor: editor1 },
                { extend: 'remove', editor: editor1 }
            ]
        });`

dynasoft

Hi, the issue was I had a nowrap tag in under scrollable250b class. Removing it fixed it. Thanks.