Inline Editing Field Jumps Left

corca

I'm trying to create a table with an inline form, but the input field jumps to the left and the entire column width increases every time I try to edit. I've found the DTE_Inline_Buttons div seems to be the source of the problem, but I can't figure out how to get rid of it or otherwise prevent this from happening.

editor = new $.fn.dataTable.Editor({
      table: '#items',
      idSrc: 'id',
      formOptions: {
        inline: {
          submit: 'allIfChanged'
        }
      },
      fields: [{
        name: 'code',
        type: 'hidden'
      }, {
        name: 'item_id',
        type: 'hidden'
      }, {
        label: 'Menu:',
        name: 'enabled_menu',
        type: 'checkbox',
        separator: '',
        options: [{
          label: '',
          value: 1
        }]
      }, {
        label: 'Featured:',
        name: 'enabled_featured'
      }, {
        label: 'Price:',
        name: 'price',
        className: ' dt-body-center'
      }]
    });

    $('#items').on('click', 'tbody td.editable', function (e) {
      editor.inline(this);
    });

    itemsTable = $('#items').DataTable({
      dom: '',
      data: data.GetDataResponse.data.item,
      paging: false,
      columnDefs: [{
          'targets': [8,9,12],
          'searchable': false
        }
      ],
      columns: [
        {data: 'item_name'},
        {data: 'enabled_menu'},
        {data: 'enabled_featured'},
        {
          data: 'price',
          className: 'editable dt-body-center',
          render: $.fn.dataTable.render.number(',', '.', 2, '$')
        },
        {
          data: 'price_compare_1',
          render: $.fn.dataTable.render.number(',', '.', 2, '$')
          // visible: false
        },
        {
          data: 'price_compare_2',
          render: $.fn.dataTable.render.number(',', '.', 2, '$'),
          visible: false
        },
        {
          data: 'sequence_menu',
          visible: false
        },
        {
          data: 'sequence_featured',
          visible: false
        },
        {
          data: 'id',
          visible: false
        },
        {
          data: 'item_id',
          visible: false
        },
        {
          data: 'available_menu',
          searchable: true,
          visible: false
        },
        {
          data: 'available_featured',
          searchable: true,
          visible: false
        },
        {
          data: 'code',
          visible: false
        }
      ]
    });

colin

Hi @corca ,

I suspect there's something else in your CSS that's changing the width of the input element for the inline editing. In this example here, the fields that have been centered (Office and Salary) are both fully filled and not affected by DTE_Inline_Buttons div. Would you be able to link to your page so we could take a look? Or modify my example so that it demonstrates the problem, please.

Cheers,

Colin