Customize the DOM
Customize the DOM
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
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
This discussion has been closed.
Replies
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
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.
‘’’<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.
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';
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
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