Search code examples
javascriptjquery-jscrollpane

JScrollPane shows blank space when children have overflow:hidden

I am trying to use JScrollPane (http://jscrollpane.kelvinluck.com/) to render a div with children that have overflow:hidden. When doing this JScrollPane renders but scrolling horizontally there is a large blank space where the overflowed text would have appeared. Below is an image showing the problem as well as the relevant code and a JS fiddle showing the issue, if you scroll to the right you'll notice there is a large area showing which is what I am trying to remove. Any ideas how to do so?

<div id="test" style="width:200px;overflow:auto;">
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
</div>

$(document).ready(function(){
    $('#test').jScrollPane({});
});

Example Image

http://jsfiddle.net/yTaAS/1/

Solution

  • This is because the inner div takes the width the parent div #test. I replace your html as following and it is working now. 

    <div id="test" style="width:200px;overflow:auto;">
  <div style="display:inline-block;">
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  </div>
</div>