Line Number Row is overflowing when it's wrapped inside a fixed height div. #381
Description
Step -1: Before filling an issue check out troubleshooting section
Step 0: Describe your environment
- OS: Mac OS Mojave
- diff2html version: 3.4.3
- Using diff2html directly or using diff2html-ui helper: diff2html directly
- Extra flags: _
Step 1: Describe the problem:
When wrapping the HTML coming from diff2html.html in fixed-sized div line numbers column seems to be broken.
The below screenshot best describes the issue,
Steps to reproduce:
const diffHtml = diff2html.html(diffString, {
drawFileList: true,
matching: "lines",
outputFormat: 'side-by-side',
});
$content.html(diffHtml);diff example:
===================================================================
--- backend-markdown
+++ frontend-markdown
@@ -3,11 +3,9 @@
<a href="https://github.com/jgm/commonmark.js">commonmark.js</a>, the<br>
JavaScript reference implementation.</p>
<ol>
<li>item one</li>
-<li>
-<p>item two</p>
-<ul>
+<li>item two<ul>
<li>sublist</li>
<li>sublist</li>
</ul>
</li>
@@ -17,11 +15,9 @@
<a href="https://github.com/jgm/commonmark.js">commonmark.js</a>, the<br>
JavaScript reference implementation.</p>
<ol>
<li>item one</li>
-<li>
-<p>item two</p>
-<ul>
+<li>item two<ul>
<li>sublist</li>
<li>sublist</li>
</ul>
</li>Observed Results:
- What happened? This could be a description, log output, etc.
Already explained above.
Expected Results:
- What did you expect to happen?
Line numbers do not overflow.
Relevant Code:
Overridding the line number position fixes the issue,
.d2h-code-side-linenumber{
position: relative;
}