addElementToSaveGroup creates visual issue

Hi there.

It seems that following the Best Practices suggestion to use addElementToSaveGroup to insert elements in the Save side panel is creating an issue with sizes (see picture below):

Code is as follows:

$this->view->form->addElementToSaveGroup('note', 'delete', array(
     'value'    => '<a href="' . admin_url('admin-images/index/delete-confirm/id/') . $image->id . '" class="delete-confirm big red button">' . __('Delete Image') . '</a>',
     'order'    => 6

It seems the issue is generated by getSaveGroupDefaultElementDecorators function inserting an extra div (with class=“field”) to contain the button, and the field.input css style making it resizing the width to calc(5/7 * 100%).

Any idea how to fix this? Besides, I wonder whether the resizing of input fields in the save side panel is actually needed at all…


Hmm, interesting.

We could fix this by taking the “field” class out, but I suspect it might be easier to change the styling so that width doesn’t apply inside the side panels.

That’s (CSS styling) the way I went for, and the patch works in my specific case.

Still, I would suggest to fix it for good, as I cannot see any reason to reduce the size of controls in side panels. I’ll open an issue on GitHub.

Thanks for your help, @jflatnes