After upgrade to 3.7 Save & Cancel buttons moved at bottom of edit page

Question

When upgrading from 3.6.5 to 3.7, the button's bar (Save, Cancel and Version buttons) is moved from top to bottom of the edit screen.
I did a fresh install of Joomla 3.7.2 and the problem appears again: when I edit an article, the button bar is below the content of the articles.
This is really annoying. Classically, they are at the top of the edit page. I think that's the best position.
Is this normal ? Does anyone know how to put them back to the top ?
NB: the template is the default protostar.
Best regards

Answer 1

It is normal - they have moved to the bottom in that release.

The buttons are part of com_content.

You can move them to the top by copying components\com_content\views\form\tmpl\edit.php to templates\protostar\html\com_content\form\edit.php and updating the code so that the following code appears just below the opening <form> tag, rather than at the bottom of the page.

<div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('article.save')">
                <span class="icon-ok"></span><?php echo JText::_('JSAVE') ?>
            </button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
                <span class="icon-cancel"></span><?php echo JText::_('JCANCEL') ?>
            </button>
        </div>
        <?php if ($params->get('save_history', 0) && $this->item->id) : ?>
        <div class="btn-group">
            <?php echo $this->form->getInput('contenthistory'); ?>
        </div>
        <?php endif; ?>
    </div>

You can also do this via the template manager.

Go to Extensions > Templates > Templates, select Protostar, select create overrides, com_content and then form. You can then browse to the file on the left under html/com_content/form.

I'd personally say to only do this if it is important to you. Whilst overrides are an acceptable way to change core code, it can mean that patches are not properly applied if you don't take the time to update your overrides should that view have changed.

Answer 2

Here is a solution that puts the buttons top-left of screen and makes them stay there (floating position).
No override, just some CSS lines in my-copy-of-protostar/css/user.css :

.form-validate > .btn-toolbar:not(.pull-left) { 
    position: fixed;
    top: 14px;
    left: 6px;
    background-color: antiquewhite;
    border-style: solid;
    border-color: antiquewhite;
    border-radius: 15px;
    padding: 3px;
    z-index: 1500;
}

form-validate is the div that contains the editor area.
There are 2 buttons bar (btn-toolbar) in that area. Only one is pulled to the left, the extension buttons bar (which permit to insert a Read More link, a Page Break etc.). The other one contains the Save, Cancel & Versions buttons that I want to pull top left as a float.
z-index is here for the buttons to stay over other stuff I have in the header.
This can be interpreted as : concerning the class btn-toolbar, when embedded in a class form-validate and not in a class pull-left do what is in the {}.
Thanks to sozzled and Richard B.