form layout allow for large input

form layout allow for large input

capeckcapeck Posts: 49Questions: 12Answers: 1

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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.

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    Fabulous! Thanks.

Sign In or Register to comment.