Steps to reproduce:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/autogrow.css">
</head>
<body>
<!--The language attribute is case-insensitive but must refer to a language from https://prismjs.com/index.html#supported-languages.-->
<code-input style="height: calc(2em + 1lh); --padding: 0px;"><textarea data-code-input-fallback>// Demo editable code
console.log("Hello, World!");</textarea></code-input>
<!--Additional usage details are here: https://code-input-js.org/#pages-->
<!--A list of plugins are here, allowing a well-rounded code-editor to be created quickly from code-input, if you're into that: https://code-input-js.org/plugins-->
</body>
</html>(Create a code-input element with a fallback textarea, containing multiple lines of code, and style it so it's one line plus the height of the fallback notice tall)
Expected Outcome:
The fallback textarea can be scrolled so the last (non-comment) line is visible.
Actual Outcome:
The fallback textarea cannot be scrolled so the last (non-comment) line is visible, since the fallback textarea is partially obscured behind the "No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate..." notice. The last line is already displayed but hidden behind that notice, so the browser sees no reason to let the textarea be scrolled down.
Steps to reproduce:
(Create a
code-inputelement with a fallback textarea, containing multiple lines of code, and style it so it's one line plus the height of the fallback notice tall)Expected Outcome:
The fallback textarea can be scrolled so the last (non-comment) line is visible.
Actual Outcome: