JS output area misaligned

[Zsailer]

I think this is a bug. Anytime you use .show() on the container object in a JS cell to display an element (dynamically from JQuery), the <div class='output_area'>'s display attribute becomes block. Apparently, .show() does this as a default setting. This causes the output area and element to line up incorrectly, underneath the hovering out_prompt_overlay button. In this case where I have a checkbox, I can't click/check the box because this button is in the way.

See this example:

I just added a simple CSS attribute to override this default and prevent the output_area from inheriting display setting and this weird behavior.

I'm not sure this is the best way to go about it... but it works.

[minrk]

We shouldn't be writing CSS explicitly in the javascript, we should be applying the proper classes.

[minrk]

@Zsailer any plans to update this?

[Zsailer]

Yes, I had forgotten about this. I'll work on this today and ping you later to review.

[minrk]

Just to note - I did not merge this PR, it was automatically closed when GitHub noticed there were zero differences between master and Zach's branch. It will be opened anew with a second fix.

[payne92]

A workaround for this problem: instead of container.show() to make the output container displayed, remove the style attribute that's making it hidden:

container.removeAttr("style");

A better approach (feature request): the iPython Javascript environment provides a (trivial) method to "show the output area container". This isolates/abstracts Javascript cell output from surrounding CSS detail.

Can this issue be reopened, or should I start a new feature request issue?

[ellisonbg]

Here is a fix for this issue: PR #4646

It was much more complicated that we thought and led to some more substantial refactoring of the output logic.