.d2h-file-diff max-height

[oldrich-s]

I would like to limit the height of every diff to e.g. 300 px. Therefore I do

.d2h-file-diff {
    overflow-y: scroll;
    max-height: 300px;
}

but then line numbers do not follow. I see they are set to:

.d2h-code-linenumber {
    position: absolute;
}

If I remove it, everything works just fine (at least it seems to).

Is there any particular reason for heaving position: absolute or can I just remove it?

PS: Thanks a lot for this great library!

[rtfpessoa]

Actually I have no idea. That was a long time ago and my CSS skills are a bit limited.

I can give it a try when I have some time.

[rtfpessoa]

After a better look I discovered that position: absolute is keeping the line numbers together. Is a solution similar to Bitbucket. GitHub uses tables style and breaks lines. Not sure if it is possible to have the best of both. For #99 it would be great.

[4picht]

If I replace position: absolute with display: block everything seems to work fine, even in scroll containers. I haven't checked many browsers though ...

[rtfpessoa]

Sorry for the delay answering.

If you change that, when scrolling horizontally the lines wont be fixed on the left side. That might be the initial reason.

[mfoe87]

Setting .d2h-code-linenumber to position:relative; worked for me. Only tested on chrome though.

.d2h-file-diff {
    overflow-y: scroll;
    max-height: 600px;
    max-width:500px;
}
.d2h-code-linenumber {
    position:relative;
}

[rtfpessoa]

Have you tried that on https://diff2html.xyz/demo?diff=https://github.com/rtfpessoa/diff2html/pull/106 for example? Does not seem to work for me.

[mfoe87]

Just did, there's a slight difference in how it's processed as it's using tables with two columns. My css looked like:

.d2h-file-diff {
    overflow-x: scroll;
    overflow-y: scroll;
    max-height: 500px;
}

.d2h-code-wrapper {
    position: relative;
}

Below is the result for hoganjs-utils, a quite large diff:

[rtfpessoa]

ahhh that looks nice. I even tested for side diffs if you apply it to .d2h-file-side-diff seems to also work.
@czb if you are still interested this seems like a nice solution.

Also if any of you wants yo send a PR with the details except the max-height: 500px; that could also be nice. Closing this for now since it is solved.