bootstrap 4 form customization

bootstrap 4 form customization

LimpEmuLimpEmu Posts: 63Questions: 17Answers: 1

I have a similar problem as the user who posted this question: https://datatables.net/forums/discussion/39542/bootstrap-editor-horizontal-form

In the responses, there are several references to other sources of documentation, however, I am struggling with finding these other sources.

For instance the response mentions: The documentation shows the default value for Bootstrap styling. I have searched the editor documentation, but I am unable to find these default values for bootstrap 4.

I am also trying to find more documentation on $.extend in the context of data tables editor. Per this question, this utility should allow me to modify the default form with the features I would like.

Finally, the post also mentions to use the DOM option to set the value you want to use, however the link goes to the datatables section of the site, not the editor section, so I am not clear how the dom option will help me.

I much appreciate your help, thank you!

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Editor Bootstrap 4 styling:
    https://editor.datatables.net/examples/styling/bootstrap4.html

    DOM options for DataTables apply with or without the Editor.

  • LimpEmuLimpEmu Posts: 63Questions: 17Answers: 1

    I have seen this example, unfortunately it does not answer my questions. Please note that my questions primarily asked for the resources that were referenced previously in another user's question.

    I was able to play with jquery extend and the style settings available through the browser tools to figure out some of what I need.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    I am also trying to find more documentation on $.extend in the context of data tables editor. Per this question, this utility should allow me to modify the default form with the features I would like.

    We use jQuery.extend() as a utility method as it is a convenient way of setting specific properties. You could use Object.assign() in modern browsers (for shallow properties). There is some documentation about that here.

    Finally, the post also mentions to use the DOM option to set the value you want to use, however the link goes to the datatables section of the site, not the editor section, so I am not clear how the dom option will help me.

    There is no dom option for Editor. The original question was "Finally, can col specs be changed in the following col-md-6?" which I took to mean the layout used by DataTables rather than Editor. Perhaps I was wrong...?

    For Editor you can adjust the layout classes using:

    $.extend( true, $.fn.dataTable.Editor.classes, {
        "field": {
            "wrapper": "DTE_Field form-group row",
            "label":   "col-lg-4 col-form-label",
            "input":   "col-lg-8"
        }
    });
    

    Allan

  • LimpEmuLimpEmu Posts: 63Questions: 17Answers: 1

    Thank you, Allan.
    I was able to get the field customization to work, much appreciate your help and clarification.

This discussion has been closed.