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

edited Nov 22 '18 at 5:16

asked Nov 22 '18 at 4:56

Shadow

285

add a comment |

<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

edited Nov 22 '18 at 5:16

asked Nov 22 '18 at 4:56

Shadow

285

add a comment |

<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

edited Nov 22 '18 at 5:16

asked Nov 22 '18 at 4:56

Shadow

285

<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

html css

edited Nov 22 '18 at 5:16

asked Nov 22 '18 at 4:56

Shadow

285

edited Nov 22 '18 at 5:16

asked Nov 22 '18 at 4:56

Shadow

285

edited Nov 22 '18 at 5:16

asked Nov 22 '18 at 4:56

Shadow

285

asked Nov 22 '18 at 4:56

Shadow

285

asked Nov 22 '18 at 4:56

Shadow

285

add a comment |

2 Answers
2

active

oldest

votes

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>

edited Nov 22 '18 at 5:40

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

It's working. But i need it to work in all browsers. Can you make your answer compatible with all browsers ?

– Shadow
Nov 22 '18 at 5:37

overlay is non-standard value and hence i am not willing to use it unless there is a standard solution

– Shadow
Nov 22 '18 at 5:40

Okay, i already updated with overflow:auto and overflow:overlay and i am finding other solution also

– Hiren Vaghasiya
Nov 22 '18 at 5:41

overflow auto doesn't remove issue

– Shadow
Nov 22 '18 at 5:42

1

using both overflow:auto and overflow:overlay works fine in all browsers. Thanks a lot.

– Shadow
Nov 22 '18 at 5:56

|
show 3 more comments

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?

answered Nov 22 '18 at 5:00

CSS in JS fan

I need scroll on left side. So i changed direction in outer-wrapper to rtl

– Shadow
Nov 22 '18 at 5:02

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424127%2funknown-padding-on-the-right-side-of-left-scroll-div-in-chrome%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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>

edited Nov 22 '18 at 5:40

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

It's working. But i need it to work in all browsers. Can you make your answer compatible with all browsers ?

– Shadow
Nov 22 '18 at 5:37

overlay is non-standard value and hence i am not willing to use it unless there is a standard solution

– Shadow
Nov 22 '18 at 5:40

Okay, i already updated with overflow:auto and overflow:overlay and i am finding other solution also

– Hiren Vaghasiya
Nov 22 '18 at 5:41

overflow auto doesn't remove issue

– Shadow
Nov 22 '18 at 5:42

1

using both overflow:auto and overflow:overlay works fine in all browsers. Thanks a lot.

– Shadow
Nov 22 '18 at 5:56

|
show 3 more comments

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>

edited Nov 22 '18 at 5:40

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

It's working. But i need it to work in all browsers. Can you make your answer compatible with all browsers ?

– Shadow
Nov 22 '18 at 5:37

overlay is non-standard value and hence i am not willing to use it unless there is a standard solution

– Shadow
Nov 22 '18 at 5:40

Okay, i already updated with overflow:auto and overflow:overlay and i am finding other solution also

– Hiren Vaghasiya
Nov 22 '18 at 5:41

overflow auto doesn't remove issue

– Shadow
Nov 22 '18 at 5:42

1

using both overflow:auto and overflow:overlay works fine in all browsers. Thanks a lot.

– Shadow
Nov 22 '18 at 5:56

|
show 3 more comments

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>

edited Nov 22 '18 at 5:40

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

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>

$('#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>

$('#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>

edited Nov 22 '18 at 5:40

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

edited Nov 22 '18 at 5:40

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

answered Nov 22 '18 at 5:32

Hiren Vaghasiya

3,0781419

It's working. But i need it to work in all browsers. Can you make your answer compatible with all browsers ?

– Shadow
Nov 22 '18 at 5:37

overlay is non-standard value and hence i am not willing to use it unless there is a standard solution

– Shadow
Nov 22 '18 at 5:40

Okay, i already updated with overflow:auto and overflow:overlay and i am finding other solution also

– Hiren Vaghasiya
Nov 22 '18 at 5:41

overflow auto doesn't remove issue

– Shadow
Nov 22 '18 at 5:42

1

using both overflow:auto and overflow:overlay works fine in all browsers. Thanks a lot.

– Shadow
Nov 22 '18 at 5:56

|
show 3 more comments

It's working. But i need it to work in all browsers. Can you make your answer compatible with all browsers ?

– Shadow
Nov 22 '18 at 5:37

overlay is non-standard value and hence i am not willing to use it unless there is a standard solution

– Shadow
Nov 22 '18 at 5:40

Okay, i already updated with overflow:auto and overflow:overlay and i am finding other solution also

– Hiren Vaghasiya
Nov 22 '18 at 5:41

overflow auto doesn't remove issue

– Shadow
Nov 22 '18 at 5:42

1

using both overflow:auto and overflow:overlay works fine in all browsers. Thanks a lot.

– Shadow
Nov 22 '18 at 5:56

It's working. But i need it to work in all browsers. Can you make your answer compatible with all browsers ?

– Shadow
Nov 22 '18 at 5:37

overlay is non-standard value and hence i am not willing to use it unless there is a standard solution

– Shadow
Nov 22 '18 at 5:40

Okay, i already updated with overflow:auto and overflow:overlay and i am finding other solution also

– Hiren Vaghasiya
Nov 22 '18 at 5:41

overflow auto doesn't remove issue

– Shadow
Nov 22 '18 at 5:42

using both overflow:auto and overflow:overlay works fine in all browsers. Thanks a lot.

– Shadow
Nov 22 '18 at 5:56

|
show 3 more comments

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?

answered Nov 22 '18 at 5:00

CSS in JS fan

I need scroll on left side. So i changed direction in outer-wrapper to rtl

– Shadow
Nov 22 '18 at 5:02

add a comment |

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?

answered Nov 22 '18 at 5:00

CSS in JS fan

I need scroll on left side. So i changed direction in outer-wrapper to rtl

– Shadow
Nov 22 '18 at 5:02

add a comment |

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?

answered Nov 22 '18 at 5:00

CSS in JS fan

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?

answered Nov 22 '18 at 5:00

CSS in JS fan

answered Nov 22 '18 at 5:00

CSS in JS fan

answered Nov 22 '18 at 5:00

CSS in JS fan

answered Nov 22 '18 at 5:00

CSS in JS fan

I need scroll on left side. So i changed direction in outer-wrapper to rtl

– Shadow
Nov 22 '18 at 5:02

add a comment |

I need scroll on left side. So i changed direction in outer-wrapper to rtl

– Shadow
Nov 22 '18 at 5:02

I need scroll on left side. So i changed direction in outer-wrapper to rtl

– Shadow
Nov 22 '18 at 5:02

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk