addElementToSaveGroup creates visual issue

[DanieleB]

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…

Thanks

[jflatnes]

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.

[DanieleB]

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