I'm experimenting with creating a console/CLI style experience using HTML. The goal is to have the input fixed at the bottom of the window, while commands and output rise up from the bottom and eventually disappear off the top of the screen, enabling scrolling once there is a sufficient amount of content.
My implementation is based on Angular, although the design aspect that seems Angular-specific is the repetition of elements (inputs+results using *ngFor). I'm hoping for a CSS-only solution, but I'm starting to think it might not be possible (I'd love to be proven wrong!) If I have to resort to JavaScript to achieve this behavior, I want it to be compatible with Angular or at least not cause any conflicts.
(Not displayed: input prompt - this part is functioning correctly)
HTML
<div id="console-wrapper">
<div id="console">
<div class="expression"
*ngFor="let exp of processorService.expressions">
<pre class="input">{{exp.input}}</pre>
<pre class="output">{{exp.output}}</pre>
</div>
<div id="anchor"></div>
</div>
</div>
CSS
#console {
overflow: scroll;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
height: 100%; /*auto; for a different set of problems*/
}
#console * {
overflow-anchor: none;
}
#anchor {
overflow-anchor: auto !important;
}
I managed to achieve the scrolling behavior I wanted, but only with the container div height set to 100%. However, this approach presents two issues:
- The content (inputs+results) starts at the top of the container instead of the bottom.
- Once there is enough content to trigger a scrollbar, it doesn't automatically scroll as new elements are added. The overflow-anchor property partially resolves this, but only after the user manually scrolls to the bottom for the first time.
If I use position: absolute to try and align the content at the bottom, it all just overlaps on itself.
If I set the container height to auto, the content starts at the bottom and expands upwards as desired. However, once it goes off the top of the screen, I struggle to activate scrolling, regardless of my attempts.