Can I remove the label that appears at the top of the inline editor?

chita

fields: [
    { name: 'accountType' },
    { name: 'dep' },
    { name: 'username' },
    { name: 'userId' },
    { name: 'email' },
    { name: 'phone' },
    { name: 'tel' },
    { name: 'registDate' },
    { name: 'expireDate' },
    { name: 'lastAccess' },
    { name: 'lastAccessDate' },
    { name: 'note' },
  ],

If you use the above code, the text displayed on the label disappears, but padding will occur at the top as shown in the attached picture. Is there a way to remove that padding?

colin

I'm not seeing that with the Editor examples, or this one here.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update that last example, or link to your page, so that we can see the problem.

Colin

chita

<script setup>
import Pageheader from "../../../shared/components/pageheader/pageheader.vue";

// DataTables
import { onMounted } from 'vue';
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Editor from '@datatables.net/editor-2023-09-13-dt';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive';
import 'datatables.net-select';
import 'datatables.net-datetime';
import 'datatables.net-colreorder';
      
DataTable.use(DataTablesCore);

onMounted(function () {
  $('#example').on('click', 'tbody td:not(:first-child)', function(e) {
    editor.inline(this);
  });

  $('#example').columns.adjust().draw();
});
     
const editor = new Editor ({
  fields: [
    { name: 'accountType', type: 'select', options: ['내부 직원', '외부 직원', '장비'] },
    { name: 'dep' },
    { name: 'username' },
    { name: 'userId' },
    { name: 'email' },
    { name: 'phone' },
    { name: 'tel' },
    { name: 'registDate' },
    { name: 'expireDate' },
    { name: 'lastAccess' },
    { name: 'lastAccessDate' },
    { name: 'note' },
  ],
  formOptions: {
    inline: {
      onBlur: 'submit',
      drawType: 'full-hold',
      fieldInfo: false,
    },
  },
  idSrc: 'checkbox',
  table: '#example',
  
});
     
const columns = [
  { title: '', data: 'checkbox', className: 'select-checkbox', orderable: false, defaultContent: '' },
  { title: '잠김', data: 'lock' },
  { title: '계정 유형', data: 'accountType', editField: 'accountType'},
  { title: '부서', data: 'dep' },
  { title: '사용자명', data: 'username' },
  { title: '사용자', data: 'userId' },
  { title: '이메일', data: 'email' },
  { title: "휴대폰", data: 'phone' },
  { title: '전화번호', data: 'tel' },
  { title: '등록일자', data: 'registDate' },
  { title: '만료일자', data: 'expireDate' },
  { title: '최근 접속', data: 'lastAccess' },
  { title: '최근 접속 시간', data: 'lastAccessDate' },
  { title: '비고', data: 'note' },
];

const options = {
  responsive: true,
  orderMulti: false,
  order: [[1, 'asc']],
  select: {
    style: 'os',
    selector: 'td:first-child'
  },
  colReorder: true,
  searching: false,
  scrollY: true,
  scroller: true,
  language: {
    select: {
      rows: {
        0: '',
        _: " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; %d개 행이 선택 됨"
      }
    },
    paginate: {
      next: ">>",
      previous: "<<",
    },
    lengthMenu: '<select>'+
      '<option value="10">10개</option>'+
      '<option value="20">20개</option>'+
      '<option value="30">30개</option>'+
      '<option value="40">40개</option>'+
      '<option value="50">50개</option>'+
      '<option value="-1">전체</option>'+
      '</select> 값 출력',
      info: "전체 데이터 _TOTAL_개 중 _START_ - _END_ 데이터가 출력되었습니다.",
  },
};

const data = [
  {
    checkbox: '',     
    lock: '',
    accountType: '내부 직원',
    dep: 'test\\test 1팀',
    username: 'TESTER',
    userId: 'TESTER ID',
    email: 'admin@test.com',
    phone: '010-1234-3491',
    tel: '02-755-1944',
    registDate: '2023-08-17 05:41:15',
    expireDate: '-',
    lastAccess: '2일 전',
    lastAccessDate: '2023-08-18 13:34:22',
    note: '',
  },
];
</script>

<template>
<DataTable
  :columns="columns"
  :data="data"
  :options="options"
  id="example"
  class="display"
/>

I'm working on the vue 3 project. The above codes are my current <script setup> and <template> codes. When you do this, padding appears at the top like in the picture above. Originally, text is displayed in that part, but since you removed the label from field:[], text is not displayed, but padding still occurs. That doesn't happen in the example, so I'm also questioning why it does. Do you happen to know a solution?

chita

<script setup>
import { onMounted } from 'vue';
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Editor from '@datatables.net/editor-2023-09-13-dt';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive';
import 'datatables.net-select';
import 'datatables.net-datetime';
import 'datatables.net-colreorder';
      
DataTable.use(DataTablesCore);

onMounted(function () {
  $('#example').on('click', 'tbody td:not(:first-child)', function(e) {
    editor.inline(this);
  });

  $('#example').columns.adjust().draw();
});
     
const editor = new Editor ({
  fields: [
    { name: 'accountType', type: 'select', options: ['1', '2', '3'] },
    { name: 'dep' },
    { name: 'username' },
    { name: 'userId' },
    { name: 'email' },
    { name: 'phone' },
    { name: 'tel' },
    { name: 'registDate' },
    { name: 'expireDate' },
    { name: 'lastAccess' },
    { name: 'lastAccessDate' },
    { name: 'note' },
  ],
  formOptions: {
    inline: {
      onBlur: 'submit',
      drawType: 'full-hold',
      fieldInfo: false,
    },
  },
  idSrc: 'checkbox',
  table: '#example',
  
});
     
const columns = [
  { title: '', data: 'checkbox', className: 'select-checkbox', orderable: false, defaultContent: '' },
  { title: 'lock', data: 'lock' },
  { title: 'accountType', data: 'accountType', editField: 'accountType'},
  { title: 'dep', data: 'dep' },
  { title: 'username', data: 'username' },
  { title: 'userId', data: 'userId' },
  { title: 'email', data: 'email' },
  { title: "phone", data: 'phone' },
  { title: 'tel', data: 'tel' },
  { title: 'registDate', data: 'registDate' },
  { title: 'expireDate', data: 'expireDate' },
  { title: 'lastAccess', data: 'lastAccess' },
  { title: 'lastAccessDate', data: 'lastAccessDate' },
  { title: 'note', data: 'note' },
];

const options = {
  responsive: true,
  orderMulti: false,
  order: [[1, 'asc']],
  select: {
    style: 'os',
    selector: 'td:first-child'
  },
  colReorder: true,
  searching: false,
  scrollY: true,
  scroller: true,
  language: {
    select: {
      rows: {
        0: '',
        _: " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; %d select"
      }
    },
    paginate: {
      next: ">>",
      previous: "<<",
    },
    lengthMenu: '<select>'+
      '<option value="10">10</option>'+
      '<option value="20">20</option>'+
      '<option value="30">30</option>'+
      '<option value="40">40</option>'+
      '<option value="50">50</option>'+
      '<option value="-1">total</option>'+
      '</select> result',
  },
};

const data = [
  {
    checkbox: '',     
    lock: '',
    accountType: 'test test',
    dep: 'test\\test 1test',
    username: 'TESTER',
    userId: 'TESTER ID',
    email: 'admin@test.com',
    phone: '010-1234-3491',
    tel: '02-755-1944',
    registDate: '2023-08-17 05:41:15',
    expireDate: '-',
    lastAccess: '2date',
    lastAccessDate: '2023-08-18 13:34:22',
    note: '',
  },
];
</script>

<template>
<DataTable
  :columns="columns"
  :data="data"
   :options="options"
   id="example"
   class="display"
/>
</template>

I'm working on the vue 3 project. The above codes are my current <script setup> and <template> codes. When you do this, padding appears at the top like in the picture above. Originally, text is displayed in that part, but since you removed the label from field:[], text is not displayed, but padding still occurs. That doesn't happen in the example, so I'm also questioning why it does. Do you happen to know a solution?

allan

You don't have a fields.label for each field - I strongly suspect that will be the issue (i.e. there is an empty label). I can't say with 100% certainty without being able to see it though. Can you give me a link to the page showing the issue? As you note it doesn't happen in the examples, so we'd need to be able to see it to diagnose it. Also you could confirm if this is the case by right clicking on the space and select "Inspect".

You probably want a label, otherwise how will user's know what data to enter in the form?

Allan

chita

The picture above is the table I made. What I want to do now is to remove the label that appears during the online editing process. That's why I removed the field.label on purpose. The text is not displayed because I removed the field.label, but padding on the label is the current problem and that's what I want to solve.

I tried implementing it on stackbliz to show you the example code, but @datables.net/editor-2023-09-13-dt module was not installed. Is it impossible to install the editor in a place like stackbliz?

allan

Is it impossible to install the editor in a place like stackbliz?

Because of the requirement for the authentication header, then yes, at the moment it can't be used there.

Try adding:

div.DTE_Inline .DTE_Label {
  display: none;
}

To your CSS. However, that is in the default CSS, which makes me thing that maybe the Editor CSS isn't being loaded? Or maybe it is set to scoped, which wouldn't worked for Editor.

Allan

allan

@chita It looks like you account was automatically flagged for spam - apologies for that. We do sometimes get false positives due to the amount of spam that we do get and block.

If you posted a reply, apologies, it looks like it might not have got through. Did you get the inline styling sorted out?

Allan

chita

Yes, it's been solved well. Thank you!