CODEWITHSUNDEEP
htmlcss
Shadow
Shadow

Reputation: 141

Unknown padding on the right side of left scroll div in chrome

I have a table with some contents. The contents increase on button click. I have managed to add scroll on the right side when overflowed. Everything works fine. When i change the scroll to left side there is an unknown padding on the right side of the div outer-wrapper. The issue is seen only when inspecting and hover over the dom element. The issue is only in chrome. I have tested with mozilla and it's working.

<div class="test-container">
  <div class="outer-wrapper">
    <div class="inner-wrapper">
      <table class="table">
        <tr>
          <td class="content-box">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <button type="button" id="click-me">
  Click Me to Fill
  </button>
</div>

The issue is with outer-wrapper. It shows unknown extension to right on inspecting.

Here is the fiddle

Here is the screenshot of issue enter image description here

Upvotes: 0

Views: 294

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You can use overflow-y: overlay; - This only works on WebKit browsers, This means that the viewport will have the same width without scroll

$('#click-me').click(function(){
	$('.table .content-box').append('<p>test</p>');
});
.test-container{
  width:100%;
  border:1px solid lightgray;
  height:530px;
  overflow:hidden;
}
.outer-wrapper{
  border:1px solid lightgray;
  height:530px;
  width:320px;
  overflow-y:auto;
  overflow-y:overlay;
  box-sizing:border-box;
  display:inline-block;
  direction:rtl;
}
.inner-wrapper{
  width:290px;
  direction:ltr;
  /* border:1px solid yellow; */
}
button{
  display:inline-block;
  width:30%;
  margin-left:50px;
  margin-top:10px;
  /* text-align:right; */
  vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="test-container">
  <div class="outer-wrapper">
    <div class="inner-wrapper">
      <table class="table">
        <tr>
          <td class="content-box">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <button type="button" id="click-me">
  Click Me to Fill
  </button>
</div>

Upvotes: 1

CSS in JS fan
CSS in JS fan

Reputation: 1

If you change direction on outer-wrapper from rtl to ltr, it seems to fix the issue.

Is it possible the issue is caused by inconsistent rtl/ltr?

Upvotes: 0

Related Questions