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












0















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










share|improve this question





























    0















    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










    share|improve this question



























      0












      0








      0


      1






      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










      share|improve this question
















      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







      html css






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 22 '18 at 5:16







      Shadow

















      asked Nov 22 '18 at 4:56









      ShadowShadow

      285




      285
























          2 Answers
          2






          active

          oldest

          votes


















          1














          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>








          share|improve this answer


























          • 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





















          0














          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?






          share|improve this answer
























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

            – Shadow
            Nov 22 '18 at 5:02












          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


















          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









          1














          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>








          share|improve this answer


























          • 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


















          1














          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>








          share|improve this answer


























          • 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
















          1












          1








          1







          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>








          share|improve this answer















          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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          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 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






          • 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





          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















          0














          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?






          share|improve this answer
























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

            – Shadow
            Nov 22 '18 at 5:02
















          0














          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?






          share|improve this answer
























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

            – Shadow
            Nov 22 '18 at 5:02














          0












          0








          0







          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?






          share|improve this answer













          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?







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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



















          • 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


















          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














          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





















































          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







          Popular posts from this blog

          Biblatex bibliography style without URLs when DOI exists (in Overleaf with Zotero bibliography)

          ComboBox Display Member on multiple fields

          Is it possible to collect Nectar points via Trainline?