Transforming HTML into a Console Experience (Angular 16)

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:

  1. The content (inputs+results) starts at the top of the container instead of the bottom.
  2. 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.

Answer №1

If you're looking to achieve this effect using CSS, one approach would be to utilize the vertical-align property. In order to use vertical-align, you need to set the display property to either table-cell or inline-block. It's important to test and see which option has the least impact on the rest of the CSS.

Here is how you can adjust your CSS:

#console {
  overflow: scroll;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 100%; /*auto; for a different set of problems*/
  display: inline-block;
  vertical-align: bottom;
}

Alternatively, you can try:

#console {
  overflow: scroll;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 100%; /*auto; for a different set of problems*/
  display: table-cell;
  vertical-align: bottom;
}

Answer №2

After some investigation, I believe I have found the solution. I realized that adding a padded element above the expressions with a height of 100vh, along with using the existing anchor element, made everything work seamlessly!

<div id="console-wrapper">
  <div id="console">
    <div id="pad"></div>
    <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>

#console {
  overflow: scroll;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 100%;
}
#console * {
  overflow-anchor: none;
}
#pad {
  height: 100vh;
}
#anchor {
  overflow-anchor: auto !important;
  height: 1px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

how to retrieve a value from a lookup field in CRM 2015 with JavaScript

How can I retrieve the email of a contact when I already have their ID? function getEmailFromContactID(){ var contactId, contactName, contactEmail, contactObject; // mbmhr_employee is the lookup field name that we want to retrieve values from c ...

Simultaneously extracting information from 2 APIs with ForkJoin: Undefined Exception encountered

Seeking to retrieve data from 2 APIs using ForkJoin. Utilizing forkjoin for asynchronous data access. Successfully retrieved homeTeamName and awayTeamName, encountering error while accessing lines: core.js:1521 ERROR ReferenceError: allline is not define ...

Combining both inline and block positioning for div content

My goal with applying CSS styles is to create a visually appealing composition of content: https://i.sstatic.net/CpVXb.png After applying my styles, I received the following result: https://i.sstatic.net/Bfh5q.jpg li { position: relative; list-styl ...

Designing a responsive two-column table layout

My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column: https://i.sstatic.net/LqbA6.png The current implementation includes the follow ...

Angular 6 - configuring HTTP requests, creating authentication services, implementing request interceptors

I am currently in the process of setting up the token login service, HTTP service, and interceptor (for setting headers) for the first time. I'm encountering some difficulties as Angular 6 differs from version 5. Here is the code snippet for my Login ...

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

Image input not working in Internet Explorer

While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...

Encountering an installation issue with Angular 2 data table

Is there a solution for resolving unmet peer dependencies during the installation of Angular 2 data table? Here is the issue I am encountering while trying to install it. https://i.sstatic.net/HcirY.png ...

Is it possible to modify a website's CSS permanently using just the browser?

Is there a way to make changes to CSS in a large project using Firefox's built-in developer tools and have them saved permanently? I've been trying to edit the style sheets, but couldn't locate the specific property I needed. Since I can&apo ...

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

Can a package-lock.json file be created without running an npm install command?

Is there a way to create only a package-lock.json file without having to redo the npm install process? I'm looking to generate the lock file without reinstalling any of the package files. Is this achievable? ...

Customize Embed with Angular Directive

I'm currently attempting to customize an embedded object using Angular Directive, but I am running into difficulties getting the directive to function correctly. Here is the code for the object: <object width="250" height="40"> <param n ...

Tips on integrating TypeScript into JavaScript

Currently, I am working with a node.js server.js file. var http = require('http'); var port = process.env.port || 1337; http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res ...

Error in executing a function within an asynchronous function sequence

Whenever a user logs in, I want to update their data in Firestore. However, the code I am using does not seem to work as expected. It fails to create a custom User object from the firebase.User. Can anyone help me understand why this is happening and how ...

When React JS and PHP(Mysql) combine, the error message "records.map is not a function" may appear

What problem am I facing with my code? The issue lies in my JavaScript code while trying to display the JSON array fetched correctly by the PHP file. The JavaScript implementation of JSON in the state is accurate, but an error occurs when attempting to us ...

Develop a versatile currency symbol mixin that can be used in various small text formats

I am currently working on a website where I need to display prices in multiple locations. To achieve this, I have created a sass mixin that is designed to add the desired currency symbol before the price with a smaller font-size. Below are examples of how ...

Create a soft focus on the background sans any filters

I am in the process of developing a website and have implemented code to blur out the background: CSS #background{ background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o ...

AngularJS DataGrid export options

Utilizing the angular-datatable plugin, complete with export buttons. You can see an example here: vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withDOM('frtip') .withPaginationType('full_numbers') // ...

Pressing the button will add text into the input field

Below is a jsfiddle link showcasing the current issue I am trying to address: http://jsfiddle.net/YD6PL/61/ Here is the HTML code snippet: <input type="text> <input type="text> <input type="text> <div> <button class="buttons"& ...

When using VueJs, the input value may not clear upon pressing the ESC key for the first time

When I press the ESC key, my input should clear. However, I am experiencing a bug where the input is not cleared after the first press of the ESC key; it only clears after the second press. Even though the console displays an empty value for the input aft ...