Line Number Row is overflowing when it's wrapped inside a fixed height div.
See original GitHub issueStep -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;
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:17 (6 by maintainers)
Top Results From Across the Web
getting fixed height div to continue on next line - Stack Overflow
You can set the width of wrapper and put those blocks which are 100px high inside it. Here is the example: http://jsfiddle.net/BVm5h/. Code:...
Read more >overflow-wrap - CSS: Cascading Style Sheets - MDN Web Docs
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise ...
Read more >overflow-wrap | CSS-Tricks
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto...
Read more >Understanding min-content, max-content, and fit-content in CSS
Consider a div element containing content that has a fixed width ... is the smallest size a box can take without overflowing its...
Read more >How To Fix Text-Overflow Ellipsis Not Working - Semicolon.dev
Set the element to display : inline-block or display: block (probably the former, but depends on your layout needs). · Set one of...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
modify css
have a try
have a try ,that fixed my problem