##// END OF EJS Templates
Backport PR #5459: Fix interact animation page jump FF...
Backport PR #5459: Fix interact animation page jump FF Firefox doesn't render images immediately as the data is available. When animating the way that we animate, this causes the output area to collapse quickly before returning to its original size. When the output area collapses, FireFox scrolls upwards in attempt to compensate for the lost vertical content (so it looks like you are on the same spot in the page, with respect to the contents below the image's prior location). The solution is to resize the image output after the `img onload` event has fired. This PR: - Releases the `clear_output` height lock after the image has been loaded (instead of immediately or using a timeout). - Removes a `setTimeout` call in the `append_output` method. - `clear_output` in zmqshell no longer sends `\r` to the stream outputs. closes #5128

File last commit:

r15966:0f1d6c70
r16229:ff1462d3
Show More
cell.less
62 lines | 1.5 KiB | text/x-less | LessCssLexer
div.cell {
border: 1px solid transparent;
.vbox();
&.selected {
.corner-all;
border : thin @border_color solid;
}
&.edit_mode {
.corner-all;
border : thin green solid;
}
}
div.cell {
width: 100%;
padding: 5px 5px 5px 0px;
/* This acts as a spacer between cells, that is outside the border */
margin: 0px;
outline: none;
}
div.prompt {
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
min-width: 11ex;
/* This padding is tuned to match the padding on the CodeMirror editor. */
padding: @code_padding;
margin: 0px;
font-family: @monoFontFamily;
text-align: right;
/* This has to match that of the the CodeMirror class line-height below */
line-height: @code_line_height;
}
@media (max-width: 480px) {
// prompts are in the main column on small screens,
// so text should be left-aligned
div.prompt {
text-align: left;
}
}
div.inner_cell {
.vbox();
.box-flex1();
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
border: 1px solid @light_border_color;
.corner-all;
background: @cell_background;
}
/* This is needed so that empty prompt areas can collapse to zero height when there
is no content in the output_subarea and the prompt. The main purpose of this is
to make sure that empty JavaScript output_subareas have no height. */
div.prompt:empty {
padding-top: 0;
padding-bottom: 0;
}