question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Line Number Row is overflowing when it's wrapped inside a fixed height div.

See original GitHub issue

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, Screenshot 2021-04-11 at 2 01 14 PM

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:open
  • Created 2 years ago
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
Shimada666commented, Aug 31, 2021

modify css

.d2h-code-side-linenumber {
  position: relative;
  display: table-cell;
}
.d2h-code-side-line {
  padding: 0 0.5em;
}

have a try

1reaction
SherCongcommented, Nov 1, 2022
.d2h-wrapper {
    transform: translateZ(0);
 }
.d2h-diff-table {
    position: relative;
 }
.d2h-code-side-linenumber {
    position: fixed;
}

have a try ,that fixed my problem

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found