form layout allow for large input

capeck

I can't seem to get the layout to work for a large input field on a custom template.

I am including a screenshot, it is the field for Pathname. I need to override the css on that label and field to give each the appropriate amount of room. I am using bootstrap5 in my project, is there a way to inherit the bootstrap styles in the editor form?

allan

Looks like you need to load the Editor Bootstrap integration files rather than the default DataTables ones. e.g. rather that using editor.dataTables.css use editor.bootstrap5.css. Also add editor.bootstrap5.js to the Javascript includes.

Allan

capeck

Following your recommendation, I'm getting closer. Working with a custom template, is there a way to specify more styling? Specifically, I want the bootstrap layout with labels above input fields no matter the width. The first screenshot is the form at a wider width, the second with a smaller width to give you an idea of the issue. I'm using bootstrap grid rows/columns to control the layout.

allan

Sure - do:

var classes = $.fn.dataTable.Editor.classes;

classes.field.label = 'col-lg-12 col-form-label';
classes.field.input = 'col-lg-12';

Before you initialise Editor. That sets the classes that will be used for the label / input pair. Have a look in the editor.bootstrap5.js file and you'll see all the classes that it sets and you might wish to customise.

Allan

capeck

Fabulous! Thanks.