CODEWITHSUNDEEP
jqueryhtmlcss
Dan
Dan

Reputation: 12096

Make div child pre elements all have the same width if one is over 100% using css

So I'm formatting a diff in the browser, I have a parent div wrapper and then each line of the diff file is displayed as a pre tag.

The pre tags display one per line and if they expand greater than 100% of the parents then you can scroll to see the rest of the line.

This works perfectly, however there is a small issue where only the pre tag that is longer than 100% is longer, the rest all stop at 100%. How can I ensure they all have the same width if one is over 100%?

If this can be done in pure html and css that would be perfect, a jQuery solution however would be very simple.

  .diff-wrapper {
    border: 1px solid #d2d2d2;
    margin:20px;
    overflow-x: scroll;
    position: relative;
  }

  .diff-wrapper pre {
    background:transparent;
    border:0;
    border-bottom:1px solid #eee;
    border-radius:0;
    display: inline-block;
    height:28px;
    line-height:28px;
    margin:0;
    min-width:100%;
    overflow: visible;
    padding:0;
    padding-left:10px;
    padding-right:10px;
    position: relative;
    white-space: pre;
    word-wrap:normal;
  }

  .diff-wrapper pre.added {
    background-color:#ddffdd;
  }

  .diff-wrapper pre.removed {
    background-color:#fee8e9;
  }
<div class="diff-wrapper">
    <pre>+ some short text here</pre>
    <pre>+ some short text here</pre>
    <pre class="added">+ some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text here</pre>
    <pre>+ some short text here</pre>
    <pre class="removed">+ some short text here</pre>
    <pre class="removed">+ some short text here</pre>
</div>

Upvotes: 1

Views: 538

Answers (2)

ebriggs
ebriggs

Reputation: 1216

Built off of a couple different answers here. Added an additional <div> to handle the display and preserve the width, while the diff-wrapper actually handled the overflow. I also adjusted the <pre> elements to display: block; to actually extend the full width for the background-color and so the padding is calculated with the width.

  .diff-wrapper {
    border: 1px solid #d2d2d2;
    margin:20px;
    overflow-x: scroll;
    position: relative;
  }
  .diff-wrapper > div {
    display: table;
    width: 100%;
  }
  .diff-wrapper pre {
    background:transparent;
    border:0;
    border-bottom:1px solid #eee;
    border-radius:0;
    display: block;
    height:28px;
    line-height:28px;
    margin:0;
    min-width:100%;
    overflow: visible;
    padding:0;
    padding-left:10px;
    padding-right:10px;
    position: relative;
    white-space: pre;
    word-wrap:normal;
  }
  .diff-wrapper pre.added {
    background-color:#ddffdd;
  }
  .diff-wrapper pre.removed {
    background-color:#fee8e9;
  }
<div class="diff-wrapper">
    <div>
        <pre>+ some short text here</pre>
        <pre>+ some short text here</pre>
        <pre class="added">+ some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text here</pre>
        <pre>+ some short text here</pre>
        <pre class="removed">+ some short text here</pre>
        <pre class="removed">+ some short text here</pre>
    </div>
</div>

Upvotes: 1

Agu Dondo
Agu Dondo

Reputation: 13579

You can do it like this:

Add another container into your .diff-wrapper

<div class="diff-wrapper">
    <div class="diff-content">
        <pre>+ some short text here</pre>
        <pre>+ some short text here</pre>
        ...
    </div>
</div>

And add this CSS

.diff-content {
    display:table;
}

Upvotes: 2

Related Questions