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
html css
add a comment |
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
html css
add a comment |
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
html css
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
html css
html css
edited Nov 22 '18 at 5:16
Shadow
asked Nov 22 '18 at 4:56
ShadowShadow
285
285
add a comment |
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>
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 bothoverflow:auto
andoverflow: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?
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
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>
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 bothoverflow:auto
andoverflow: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>
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 bothoverflow:auto
andoverflow: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>
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 VaghasiyaHiren Vaghasiya
3,7851621
3,7851621
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 bothoverflow:auto
andoverflow: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 bothoverflow:auto
andoverflow: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
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
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
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
overflow auto doesn't remove issue
– Shadow
Nov 22 '18 at 5:42
1
1
using both
overflow:auto
and overflow:overlay
works fine in all browsers. Thanks a lot.– Shadow
Nov 22 '18 at 5:56
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?
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?
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?
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 fanCSS in JS fan
11
11
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
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 |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown