Skip to content

Un-align animations created with to_jshtml()? #11795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
mgeier opened this issue Jul 29, 2018 · 0 comments · Fixed by #12098
Closed

Un-align animations created with to_jshtml()? #11795

mgeier opened this issue Jul 29, 2018 · 0 comments · Fixed by #12098
Milestone
v3.1.0

Comments

@mgeier
Copy link
Contributor

mgeier commented Jul 29, 2018

I have asked this on the matplotlib-users mailing list (https://mail.python.org/pipermail/matplotlib-users/2018-July/001464.html) and I was encouraged to open an issue here.

Bug report

Bug summary

Animations created with to_jshtml() are centered, and it is quite hard to un-center them.

The culprit is this line:

matplotlib/lib/matplotlib/_animation_data.py

Line 151 in c552bdc

<div class="animation" align="center">

Code for reproduction

An example can be seen on this page: https://splines.readthedocs.io/en/latest/bezier.html

Actual outcome

The HTML+JS animations are centered.

Expected outcome

Ideally, the alignment of animations should be the same as when using to_html5_video() and the same as for normal plots.
In other words, the animations should be left-aligned.

If the previous behavior isn't supposed to be changed, it would be great to add an option that allows disabling the centered alignment.

Another reason to remove the alignment: the "align" attribute of "div" elements is "obsolete" and "deprecated" according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

Matplotlib version
dopplershift added a commit to dopplershift/matplotlib that referenced this issue Aug 6, 2018
@dopplershift
ENH: Don't center the HTML animation rendering (Fixes matplotlib#11795)
a8305df 
Centering the animations makes them align differently than the regular
images in the notebook. Also, align attribute is somewhat deprecated.

This adjusts some of the styling as well so that the controls are
somewhat aligned with themselves.
@dopplershift dopplershift mentioned this issue Aug 6, 2018
Closed
6 tasks
dopplershift added a commit to dopplershift/matplotlib that referenced this issue Aug 15, 2018
@dopplershift
ENH: Don't center the HTML animation rendering (Fixes matplotlib#11795)
320dc30 
Centering the animations makes them align differently than the regular
images in the notebook. Also, align attribute is somewhat deprecated.

This changes to use inline-block with a div to put the whole animation
at the left, and then center the controls within that block.
dopplershift added a commit to dopplershift/matplotlib that referenced this issue Aug 15, 2018
@dopplershift
ENH: Don't center the HTML animation rendering (Fixes matplotlib#11795)
7afb3b0 
Centering the animations makes them align differently than the regular
images in the notebook. Also, align attribute is somewhat deprecated.

This changes to use inline-block with a div to put the whole animation
at the left, and then center the controls within that block.
@timhoffm timhoffm mentioned this issue Sep 11, 2018
Merged
@QuLogic QuLogic added this to the v3.1 milestone Sep 14, 2018
@mgeier mgeier mentioned this issue Sep 14, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v3.1.0
Development

Successfully merging a pull request may close this issue.

Improve layout of HTML animation timhoffm/matplotlib
2 participants
@QuLogic @mgeier