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

Riken-Shah · 2021-04-11T08:44:12Z

Step -1: Before filling an issue check out troubleshooting section

Go to README.md#Troubleshooting

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;
}

The text was updated successfully, but these errors were encountered:

rtfpessoa · 2021-04-25T10:53:39Z

Hi @Riken-Shah,

I cannot replicate this behavior, even with ridiculously small widths the lines never break.
Can you provide a complete HTML example where it breaks?
You can check #380 (comment) as a starting point for the example.

Riken-Shah · 2021-04-25T12:45:35Z

Hey @rtfpessoa,

I might have missed mentioning that it breaks inside a fixed-sized div where overflow = scroll.

Here is the HTML code, where you can quickly reproduce the behavior (Try to scroll),

<!DOCTYPE html>
<html>
<head>
  <title>Report</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
</head>
<body>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const diffString = `===================================================================
--- 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>`;

        const configuration = { outputFormat: 'line-by-line', drawFileList: false, matching: 'lines' };
        const html = Diff2Html.html(diffString, configuration);
        document.getElementById("code-block").innerHTML = html;

  })
</script>
<div style="margin: 5%;">
  <pre id="code-block" style="height: 500px; overflow: scroll;"></pre>
</div>
</body>

rtfpessoa · 2021-05-07T21:17:29Z

@Riken-Shah After replacing the pre tags with a div I can see the issue.
But it cannot be fixed by changing the position to relative since that makes the horizontal scroll hide the line numbers.

Unfortunatly I do not have a solution atm for that scenario. Let me know if you have ideas.

ve3 · 2021-07-21T15:59:04Z

I think it is the same as this issue #185

Add position:relative to .d2h-diff-table class will work and line number still show the same across browsers.
The CSS did not wrap element that have position:absolute that's why it will be always break when it is not in the normal element. (in the element that have limited height, overflow scroll will break position:absolute if there is no position:relative wrap on it.)

Read more about this at -> https://css-tricks.com/absolute-positioning-inside-relative-positioning/
and -> https://dzone.com/articles/css-position-relative-vs-position-absolute
and -> https://developer.mozilla.org/en-US/docs/Web/CSS/position

absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left

relative
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

This mean... td with position:absolute will be working fine on static page. Scroll page down, the td will be move up as its position.
But if td with position:absolute is in the div with height: 300px; overflow: auto;, when scroll it does not scroll the page but scroll the div but td position is still stick to the page -> then it's broken.
Wrap position:absolute with position:relative on its parent element fix this problem and did not break the layout.

rtfpessoa · 2021-07-23T20:08:55Z

@ve3 like I said before. If I do that change I always get it broken on horizontal scroll.

You really need to provide an example where it is not broken. I cannot replicate the fix.

ve3 · 2021-07-24T02:29:22Z

I don't see any horizontal scroll broken. https://codepen.io/ve3/pen/LYyOdNQ

Checked on Firefox, Chrome.

How does it broken?
side by side or some special configuration?

Update: Oh! I see that when H scroll to the right, the line number disappear. Is that?

In this case...
Reference to GitHub

from this page 6572b68

I try to locate the element with class file js-file js-details-container js-targetable-element and then add custom style

width: 500px;
overflow: auto;
height: 400px;

to see how is it on GitHub and the result as seen in screenshot.
They are just ignore horizontal scroll for line numbers.

In this case, I see that H scroll on line numbers and limited height inside wrapped element can't go together without additional JS to render special element.
So, for @Riken-Shah or anyone who have this problem including me... I have to add special CSS (postition relative) and choose to ignore H scroll for line numbers to keep it display properly in limited height element.

rtfpessoa · 2021-07-24T22:14:10Z

The example you provided is broken. The line numbers are supposed to always be visible.
When you scroll then disappear.

That only happens due to the change.

ve3 · 2021-07-25T08:48:17Z

I was updated the example -> https://codepen.io/ve3/pen/LYyOdNQ

The code below can help fix horizontal scroll with position relative.

// @link https://stackoverflow.com/a/8676457/128761 Fix horizontal scroll.
var leftOffset = parseInt($(".d2h-code-side-linenumber").css('left')); //Grab the left position left first
$('.d2h-file-side-diff').scroll(function(){
    $('.d2h-code-side-linenumber').css({
        'left': $(this).scrollLeft() + leftOffset //Use it later
    });
});

It is not very good result but in case who want to keep both working, this maybe help.

Shimada666 · 2021-08-31T13:54:41Z

modify css

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

have a try

rtfpessoa · 2021-09-01T15:31:34Z

@Shimada666 not sure what you were expecting but it does not work.

fatihpense · 2021-09-11T23:23:17Z

@rtfpessoa, Maybe it is a different but related bug. Inserted HTML creates double scrollbars if a parent div is scroll=auto & fixed height. @Shimada666 's CSS fixed this problem for me.

rtfpessoa · 2021-09-18T20:21:23Z

Yes, the problem we are trying to solve here is to have a limited height, but the HTML and CSS are not ready for this. It would need a re-write to make it work without breaking the current functionality.

aldifirmansyah · 2021-09-24T09:15:58Z

I encounter the same issue. Are there any chance that this will be fixed? Or did you fix this issue on your project @Riken-Shah ?

Riken-Shah · 2021-09-27T12:13:37Z

@aldifirmansyah, No I also tried but I can't seem to fix it.
I am just using this CSS rule, to make things a little better

.d2h-code-side-linenumber{
    position: relative;
}

As @rtfpessoa said, using this will create another issue,

But it cannot be fixed by changing the position to relative since that makes the horizontal scroll hide the line numbers.

ve3 · 2021-09-27T13:48:41Z

@aldifirmansyah, No I also tried but I can't seem to fix it.
I am just using this CSS rule, to make things a little better
.d2h-code-side-linenumber{
    position: relative;
}
As @rtfpessoa said, using this will create another issue,

But it cannot be fixed by changing the position to relative since that makes the horizontal scroll hide the line numbers.

Maybe my sample might help
https://codepen.io/ve3/pen/LYyOdNQ

nghiepdev · 2021-12-27T08:05:34Z

Same issue, but to fix just using

.d2h-diff-tbody tr {
  position: relative;
}

SherCong · 2022-11-01T03:22:00Z

.d2h-wrapper {
    transform: translateZ(0);
 }
.d2h-diff-table {
    position: relative;
 }
.d2h-code-side-linenumber {
    position: fixed;
}

have a try ,that fixed my problem

Githamza · 2024-02-02T09:16:24Z

Any updates, that was fixed since ?

ve3 · 2024-02-02T09:23:58Z

Due to the fixes maybe conflict with stick line numbers. Stick line numbers is default option for this repo. So, I think what if you add some option to do not stick line numbers and use one of our CSS to fix the problem?

Evntual · 2024-04-06T15:45:59Z

Just came across this issue while trying to show the html inside a scrollable Dialog component from Material UI. Adding transform: translateZ(0); to .d2h-wrapper fixed my issue.

Before (see the two scroll bars):

After (only one scrollbar, works perfectly):

Copied the original .d2h-wrapper content from diff2html/bundles/css/diff2html.min.css and included the modified version in my index.css:

.d2h-wrapper {
  text-align: left;
  transform: translateZ(0);
}

Riken-Shah changed the title ~~Line Numbers is overflowing when it's wrapped inside fixed heigh div.~~ Line Number Row is overflowing when it's wrapped inside a fixed height div. Apr 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Riken-Shah commented Apr 11, 2021 •

edited

Loading

rtfpessoa commented Apr 25, 2021

Riken-Shah commented Apr 25, 2021 •

edited

Loading

rtfpessoa commented May 7, 2021 •

edited

Loading

ve3 commented Jul 21, 2021

rtfpessoa commented Jul 23, 2021

ve3 commented Jul 24, 2021 •

edited

Loading

rtfpessoa commented Jul 24, 2021

ve3 commented Jul 25, 2021

Shimada666 commented Aug 31, 2021

rtfpessoa commented Sep 1, 2021

fatihpense commented Sep 11, 2021

rtfpessoa commented Sep 18, 2021

aldifirmansyah commented Sep 24, 2021

Riken-Shah commented Sep 27, 2021

ve3 commented Sep 27, 2021

nghiepdev commented Dec 27, 2021

SherCong commented Nov 1, 2022 •

edited

Loading

Githamza commented Feb 2, 2024

ve3 commented Feb 2, 2024

Evntual commented Apr 6, 2024

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

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

Comments

Riken-Shah commented Apr 11, 2021 • edited Loading

Step -1: Before filling an issue check out troubleshooting section

Step 0: Describe your environment

Step 1: Describe the problem:

Steps to reproduce:

diff example:

Observed Results:

Expected Results:

Relevant Code:

rtfpessoa commented Apr 25, 2021

Riken-Shah commented Apr 25, 2021 • edited Loading

rtfpessoa commented May 7, 2021 • edited Loading

ve3 commented Jul 21, 2021

rtfpessoa commented Jul 23, 2021

ve3 commented Jul 24, 2021 • edited Loading

rtfpessoa commented Jul 24, 2021

ve3 commented Jul 25, 2021

Shimada666 commented Aug 31, 2021

rtfpessoa commented Sep 1, 2021

fatihpense commented Sep 11, 2021

rtfpessoa commented Sep 18, 2021

aldifirmansyah commented Sep 24, 2021

Riken-Shah commented Sep 27, 2021

ve3 commented Sep 27, 2021

nghiepdev commented Dec 27, 2021

SherCong commented Nov 1, 2022 • edited Loading

Githamza commented Feb 2, 2024

ve3 commented Feb 2, 2024

Evntual commented Apr 6, 2024

Riken-Shah commented Apr 11, 2021 •

edited

Loading

Riken-Shah commented Apr 25, 2021 •

edited

Loading

rtfpessoa commented May 7, 2021 •

edited

Loading

ve3 commented Jul 24, 2021 •

edited

Loading

SherCong commented Nov 1, 2022 •

edited

Loading