How to put action buttons in the header and footer of a form (HTML template)

How to put action buttons in the header and footer of a form (HTML template)

AlignFAlignF Posts: 4Questions: 2Answers: 0
edited November 2022 in Editor

Hello,
I'm using an HTML form ( https://editor.datatables.net/manual/templates ) to add/modify/delete data on a table.

<div id="usersForm">
    <fieldset class="name">
        <legend>Name</legend>
        <div data-editor-template="first_name"/>
        <div data-editor-template="last_name"/>
    </fieldset>
    <fieldset class="office">
        <legend>Office</legend>
        <div data-editor-template="office"/>
        <div data-editor-template="extn"/>
    </fieldset>
    <fieldset class="hr">
        <legend>HR info</legend>
        <div data-editor-template="position"/>
        <div data-editor-template="salary"/>
        <div data-editor-template="start_date"/>
    </fieldset>
</div>

By default the buttons are in the footer.

Sometimes the form is very large and not all fields are mandatory, so there is no need to scroll down the entire form to access the action buttons (cancel, create, edit, delete).

So I would like to know how to add these buttons in the header IN ADDITION to the footer

Thank you

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

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

    You mean the submit button? There isn't an option for that I'm afraid, however, the header and footer should be always shown on the screen and only the form fields scroll. Is that not happening for you? Can you give me a link to a page showing that issue?

    Thanks,
    Allan

  • AlignFAlignF Posts: 4Questions: 2Answers: 0

    Hello Allan,
    Yes I am talking about the submit button
    Alas, the website is local..
    I would have liked to recreate it but there is a lot of data and it would take me too long, here is a screen if it can help you

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

    What modal are you using there? e.g. Bootstrap, Bootstrap 5, Editor's native one, something else?

    I haven't been able to make the modal shown here require scrolling the whole page when resizing the window vertically. It always shows the buttons. Can you?

    Allan

Sign In or Register to comment.