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

AlignF

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.

allan

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

AlignF

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

allan

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