Overlapping text in 2.0.6

emarcotte commented 7 years ago

Hello,

The changes in 2.0.6 seem to cause a me to get some overlapping text in firefox and chrome on windows. It mostly it seems to affect comments, as if they're not given their own row or something. I've tried to attach a screenshot of the issue here:

overlap

A downgrade to 2.0.5 fixes the overlap.

I'm not sure how to provide much better detail about the issue so please let me know if there's more specifics I can provide.

If I have some time tomorrow I will try to dig into the css to figure out which part specifically causes the issue. At the very least, I'll try to get it to happen with a diff I'm more comfortable sharing and upload an actual test case, for now this is the file I'm using, but with a real diff in the string:

<html><head><meta charset='UTF-8'><title>diff h947920</title><body>
    <form method="GET" >
    <input type="hidden" value="113262" name="ID"/>
    <input type="hidden" value="1" name="CLEAR"/>
    <label for="NOCOMBINE">Expand revs</label>
    <input type="checkbox"  id="NOCOMBINE" name="NOCOMBINE" alt="Combines diffs of multiple revisions into a single diff, but not quite as fancy as revdiff"/>
    <select name="MODE"><option value="side-by-side" selected>side-by-side</option><option value="line-by-line" >line-by-line</option></select>
    <span class="ui-spinner ui-corner-all ui-widget ui-widget-content"><input type="text" class="ui-spinner-input" name="SEARCH" placeholder="h# || changelist ids" value="h947920" size="50" /></span>
    <input type="text" name="CONTEXT" id="CONTEXT" placeholder="ctxt" value="" size="3" />
    <input type="submit" value="Diff!"/>
    </form>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.min.css" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script>
    $(":checkbox").checkboxradio().tooltip();
    $("select").selectmenu();
    $(":submit").button();
    $("#CONTEXT").spinner({
        min: 0,
    });
    </script>
Changelists: 2472171 2472172 2472216<br />
        <div id='diff-div'></div>
        <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
        <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.0.6/diff2html.min.css' />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.0.6/diff2html.js' type='text/javascript'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.0.6/diff2html-ui.js' type='text/javascript'></script>
        <script type='text/javascript'>
            var diff2htmlUI = new Diff2HtmlUI({ diff: "my diff here" });
            diff2htmlUI.draw('#diff-div', {
                inputFormat: 'json',
                showFiles: true,
                matching: 'lines',
                outputFormat: 'side-by-side',
                synchronisedScroll: true
            });
            diff2htmlUI.highlightCode('#diff-div');
            diff2htmlUI.fileListCloseable('#diff-div', true);
        </script>
    </body></html>

rtfpessoa commented 7 years ago

Actually I cannot replicate the problem if you look in the live version all seems fine.

https://diff2html.xyz/demo

emarcotte commented 7 years ago

Turns out it was due to not having a doctype forcing html5. Simply adding <!DOCTYPE html> fixed my problem.

rtfpessoa commented 7 years ago

Ok. Cool 😄

rtfpessoa / diff2html

Overlapping text in 2.0.6 #103