Customize the DOM

jalape

Good afternoon
I am trying to customize a Datatable Editor form using php, with the "template" option.
Specifically, I want to manage the Bootstrap design that the “editor-field” tag has by default of 4 and 8 columns.
I think I am not fully understanding the operation of the DOM, since using the one I found in: https://editor.datatables.net/manual/styling/dom#Fields

TEXT-LABEL

I try to apply to my fields, for example: name="tb_libro.titulo" and the content is not displayed.
With the default: <editor-field name="tb_libro.titulo"></editor-field> if it shows.
Thank you

colin

This example should help, see the HTML tab - it's showing how to create a custom form.

If that doesn't help, could you link to your page, please, so we can see what the issue is,

Colin

jalape

Thanks Colin for responding.
What I need to do is what I show in these two images with the browser tools. Change the Bootstrtap classes col-lg 4 and col-lg 8 by, which corresponds to the space assigned to the label and input, by col-lg 2 and col-lg 10.
The <editor-field name = "tb_book.title"> </editor-field> tag holds the two elements together internally.
My question is how is the structure for a field with the two separated elements to be able to assign the Bootstrap class to each element.

jalape

‘’’<editor-field name="tb_libro.materia_id"></editor-field>

'''

In the first one there is no problem, but I cannot configure the width of the label. In the second, it does not link to the corresponding field.

jalape

I've found a way to be able to assign Bootstrap classes to tags and input separately. It remains to be seen if it is possible to assign it to only certain fields.

$.fn.dataTable.Editor.classes.field.label = 'col-lg-12 d-none';
$.fn.dataTable.Editor.classes.field.input = 'col-lg-12';

allan

Currently no it is not. The only way it could be done is to initialise the Editor as normal and then use field().node() and a bit of jQuery (or whatever) to modify the class names that have been assigned to the fields.

Allan

jalape

With a little css I have achieved what I was looking for: the fields "pa_clave" and names_rel have no labels and remain 100% wide on all devices.

datatable.js
$.fn.dataTable.Editor.classes.field.label = 'col-12 col-sm-3';
$.fn.dataTable.Editor.classes.field.input = 'col-12 col-sm-9';

editor.css

pa_clave label,

nombres_rel label {

display: none;
}

@media(min-width: 180px) {
#pa_clave div.DTE_Field div:not([data-dte-e="msg-error"]),
#nombres_rel div.DTE_Field div:not([data-dte-e="msg-error"]){
width: 100%;
}
}

@media(min-width: 576px) {
#pa_clave div.DTE_Field div:not([data-dte-e="msg-error"]),
#nombres_rel div.DTE_Field div:not([data-dte-e="msg-error"]){
width: 133%;
}
}

Thank you all