0

NOTE : The name of the post is what I suppose is happening... It can be edited later if someone find a better short description

> What am I trying to do ?

I'm trying to hide a scroll bar by adding padding on the right side of the scrollable element. This element contains child elements (list or table)

> What problems are you facing ?

The width of the child element should be 100% of the containing element, but obviously it's less. The empty space on the right looks like it's the scrollbar place.

So my questions are :

  • Why is that happening ?
  • How can I get the childElement (.inner*) to fit in the ContentBox of its parent ?

> Can you reproduce the bug ?

Here is a Fiddle with nothing else but what I'm talking about : JsFiddle

> Show me that code !

SIR YES SIR :o)

#mainWin {
  overflow: hidden;
}

.container {
  width: 100%;
  padding-right: 40px;
  box-sizing: content-box;
  overflow: auto;
}

.innerContent, .innerTable {
  width: 100%;
}

/* ################################################################ */
/* DO NOT REMOVE */
/* FIXED PROPERTIES */
#mainWin {
  /* Simulate a calculated width (in %) */
  width: 400px;
}
.container {
  /* Arbitrary height of the scroll zone */
  height: 200px;
}
/* DEBUG ¨PROPERTIES */
#mainWin {border: 1px solid #000;}
.container {background: #A55;border: 1px solid #5A5;}
.innerContent, .innerTable {background: #55A;border: 1px solid #D4E200;}
/* END DO NOT REMOVE */
/* ################################################################ */
<div id="mainWin">
  <div class="container">
    <table class="innerTable">
      <tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr>
    </table>
  </div>
  <hr>
  <div class="container">
    <div class="innerContent">
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
    </div>
  </div>
</div>

PS: I put some CSS properties apart (end of CSS section) because I don't think they have anything to do with this problem and seems mandatory for me to get the expected result

♥

Apolo
  • 3,844
  • 1
  • 21
  • 51
  • What do you mean "hide a scroll bar"... It shouldn't display at all? How will users access the overflow? – misterManSam Oct 29 '14 at 15:54
  • Try the JsFiddle : the scrollbar is hidden because it is pushed too far on the right (thanks to `padding-right:40px`) so the `overflow:hidden`property of mainWin hide it. But the user can scroll the content of `container` (property `overflow: auto;`) with the mouse wheel. (http://jsfiddle.net/x79kro1n/1/) – Apolo Oct 29 '14 at 16:00
  • Retracted my answer since it's not working, I got it working in JSFiddle but didn't think to save what I did and can't remember it now. – Zack Oct 29 '14 at 17:40
  • Ahah, bad luck for me. If you can find again I would be very glad ! I can't find a way to achieve it properly – Apolo Oct 29 '14 at 22:22

1 Answers1

0

I found a way to solve my problem by adding some Javascript. If someone has a pure CSS solution, I would like to see it.

Here is the Javascript added :

function removeScrollBar() {
    $(".container").each(function() {
        var iWidth = $(this).width();
        var child = $(this).find(".innerTable, .innerContent");
        child.css('width',iWidth);
    });
}

$(function() {
    removeScrollBar();
});

Working JsFiddle

Apolo
  • 3,844
  • 1
  • 21
  • 51