5

While using HTML/CSS/JS code snippet if the code has some console output .The console window takes major part of the screen at bottom and the bottom contents of the code are not visible.

Say there is a button at bottom of the browser screen and at the same time a console output so the things get overlapped.

4
  • you can just not show console div in snippet
    – Grundy
    Commented Jan 26, 2017 at 8:22
  • @Grundy I am saying when I am actually running the code snippet
    – Hemant
    Commented Jan 26, 2017 at 17:11
  • It's a bit unclear what you're talking about. The code window is separate from the results window, so the code is always visible. If you mean the bottom part of the results is cut off by the console; sure. But in that case, click the full page link. Commented Jan 26, 2017 at 17:24
  • 1
    I'm not @Grundy, but anyway, yes, it's visible in full page, but it shouldn't cut off the content at that point. Commented Jan 26, 2017 at 17:30

2 Answers 2

4

Console here in result is a simple div with as-console-wrapper class. So you can add styles to customize it.

For example: set max-height, add hover style

console.log("This");
console.log("is");
console.log("as");
console.log("example");
console.log("output");
console.log("that");
console.log("takes");
console.log("up");
console.log("a");
console.log("lot");
console.log("of");
console.log("space");
.as-console-wrapper {
  height: 25px;
  opacity: 0.2;
}
.as-console-wrapper:hover {
  height: auto;
  opacity: 1;
}
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>

Or event make a label for console like this

setTimeout(function() {
  console.log("This");
  console.log("is");
  console.log("as");
  console.log("example");
  console.log("output");
  console.log("that");
  console.log("takes");
  console.log("up");
  console.log("a");
  console.log("lot");
  console.log("of");
  console.log("space");
}, 2000);
.as-console-wrapper {
  transform: translateX(90%);
}
.as-console-wrapper .as-console {
  display: none;
}
.as-console-wrapper::before {
  content: "Console";
  display: block;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
}
.as-console-wrapper:hover {
  transform: translateX(0);
}
.as-console-wrapper:hover::before {
  display: none;
}
.as-console-wrapper:hover .as-console {
  display: table;
}
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>

1
  • 1
    this should be available already
    – Hemant
    Commented Jan 26, 2017 at 18:07
2

A work around in the meantime:

  • Right-click on console and "Inspect Element"
  • Right-click on the as-console-wrapper div
  • Delete node

Try it with the snippet below:

console.log("This");
console.log("is");
console.log("as");
console.log("example");
console.log("output");
console.log("that");
console.log("takes");
console.log("up");
console.log("a");
console.log("lot");
console.log("of");
console.log("space");
<p>Testy test is for testing.</p>

You could also leave a comment for the OP pointing out that they've hidden an important part of their results by including the console and suggest they either hide it or add white space to the bottom of their HTML.

1
  • yes thats exactly what I am saying
    – Hemant
    Commented Jan 26, 2017 at 17:34

You must log in to answer this question.

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