6

When you have code that generates a higher "box" than the result window, it's hard to see the content of it. Is there a way to control the height of the result window?

I'm aware of the full screen option, but I was thinking it will be a good idea to have some control of the height on the inline mode.

console.log("As a console output I'm also taking up some height space");
console.log("sorry");
console.log("for that");
console.log("spam!");
#root {
  color: #fff;
  height: 300px;
  font-size: 3em;
  background-color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<div id="root">
  <div>
    Hi there, I'm here.
  </div>
  <div> But it's hard to see me in full!</div>
</div>

5
  • I agree and disagree with this. The main problem to the console is that it is in the result window. It absolutely has no place being there. It should be beneath the window.
    – Travis J
    Commented Sep 5, 2017 at 22:30
  • @TravisJ I disagree. I mainly use the snippet for the console, and rarely ever use the actual display. I end up using .as-console-wrapper { max-height: 100% !important } to force the console to take the entire height as opposed to being confined to the bottom little bit of the snippet. Removing the console from the snippet would not only break my workflow (and the workflow of others I have seen doing the same thing), but it would break snippets that are set up like this already (of which there are countless).
    – user4639281
    Commented Sep 5, 2017 at 22:42
  • @TinyGiant - If there is no output to the window, then it simply shouldn't take up space and the console should get the full height anyway. I don't see how that would impact your example. Also, I think that hacking the console to be larger, as its allotted space is clearly problematic, is not a very viable solution for the exchange. It needs its own place beneath the output window.
    – Travis J
    Commented Sep 6, 2017 at 7:59
  • @TravisJ & TinyGiant i still think the result window is too small for most cases. the console noise is only part of the problem and not the main issue, i was just using it in this example to make a point. i do think a console should be present as its in use in a lot of snippets.
    – Sagiv b.g
    Commented Sep 6, 2017 at 17:11
  • @Sag1v - I am not saying remove the console, I am saying relocate the console.
    – Travis J
    Commented Sep 6, 2017 at 18:53

1 Answer 1

7

You can reduce the size of the console output by changing the max-height value of .as-console-wrapper. I don't think that adding an option to change the height of the result window would benefit the site.

console.log("As a console output i'm also taking up some height space");
console.log("sorry");
console.log("for that");
console.log("spam!");
#root {
  color: #fff;
  height: 300px;
  font-size: 3em;
  background-color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.as-console-wrapper { max-height: 1.5em !important; }
<div id="root">
  <div>
    Hi there, I'm here.
  </div>
  <div> But it's hard to see me in full!</div>
</div>

1
  • even though the console height was just part of the problem (in my opinion at least) i did not know about this css class and it's very helpful to know that i can control it as it's in the same scope as my cod. this led me to inspect other classes and realize that i can't control the window height as it's out of my snippet code. so thank you and i will accept this answer. though i still think we should be able to increase the window size or at least find an elegant approach to show more content in the result window. maybe a feature that collapse the code window and expend the result.
    – Sagiv b.g
    Commented Sep 6, 2017 at 17:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .