How do you change the height of the console? about simple-console HOT 6 CLOSED

Okay, so if you want other stuff on the page, you probably don't want that html, body stuff; the 40% will compound and that code is only designed for making it fill the whole page.
You could set a max-height, either to 20% or 20vh, but you probably want:

.simple-console {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
}

If you're wanting an expandable/collapsable console, I was planning on making an example like that: #7

from simple-console.

The 100% height code is just a suggestion and it* should work with other ways of specifying heights...
If you look in the devtools inspector, do you see the <div class="simple-console"> at 0 height or is it some other problem? How are you specifying the height?

(Edit: *it as in simple-console / the simple-console div, not the 100% height code, to be clear)

from simple-console.

I was trying:

<style>
    html,
    body {
      height: 40%;
      margin: 0;
      display: flex;
      flex: 1;
    }
    h1, p {
      margin: 0.5rem 0;
    }
    h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: normal;
    }
    a {
      color: #4078c0;
    }
    a:not(:hover) {
      text-decoration: none;
    }
    code {
      font-family: inherit;
      padding: 0.1em 0.2em;
      border: 1px solid rgba(128, 128, 128, 0.5);
      border-radius: 0.1em;
    }
  </style>

I basically want it just at the bottom 20% of the page..I do see

from simple-console.

Great thanks

from simple-console.

Did you ever get around to the expandable console? I'd like to use this to provide commandline like tools to a automated testing tool I'm building for internal use for advanced users. I'd like to expand it from the bottom of the screen, which I can do, but I'm not sure how to get the console to adapt well. I tried a simple max-height with overflow-y, which works well for input, but when I .log() information it doesn't always scroll to the bottom.

from simple-console.

@danloughmiller Late response, but I've just added an expandable/collapsible console example: https://1j01.github.io/simple-console/tilde

I didn't make it take up a minimal amount of space (with few commands entered) like it sounds like you're trying to do, so I don't know how difficult that might be. It might need some restructuring in simple-console to make that work, I don't know. Only an inner container is supposed to scroll, so it only knows to scroll to the bottom of that.
It would definitely be possible to put the console in a resizable pane, though, if you wanted. There are libraries for that sort of thing. And then the user could manage the height, at least.

from simple-console.