JQuery Slimscroll issue

      $(document).ready(function(e){ 
$('#boxL').slimscroll({
    color: '#212121',
    position:'right',
     distance : '0px',
    size: '10px',
    height: '800px',
    width:'200px',
    alwaysVisible: true
});
});

    $(document).ready(function(e){ 
$('#boxC').slimscroll({
    color: '#212121',
    position:'right',
     distance : '0px',
    size: '10px',
    height: '800px',
    width:'200px',
    alwaysVisible: true
});
});



    $(document).ready(function(e){ 
$('#boxR').slimscroll({
    color: '#212121',
    position:'right',
     distance : '0px',
    size: '10px',
    height: '800px',
    width:'200px',
    alwaysVisible: true
});
});

* {
  box-sizing:border-box;  
}

.bloqueL {
  border:1px solid #000;
  padding:10px;
display:inline-block;

}
.bloqueC {
  border:1px solid #000;
  padding:10px;
display:inline-block;


}
.bloqueR {
  position:absolute;
  top:0px;
  right:0px;
  border:1px solid #000;
  padding:10px;
display:inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://madeindreams.ca/JS/jquery.slimscroll.min.js"></script>

<body>
  <div id="boxL" class="bloqueL" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
  </div>
  
  <div id="boxC" class="bloqueC" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
      </div>
  
    <div id="boxR" class="bloqueR" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
      </div>
</body>

I have found Slimscroll and tried it. On the site where they show a working demo the scroll bar is attached to the container. But when I try it. the scroll bar is all the way to the right.

I have 3 containers and eventually on the page

I would like my 3 containers to be aligned on the same line. But because of slimscroll they are one after each other.

Even if I set the position to absolute it is not working.

Solution

The problem is in the height: '100%', option. You can set this only if the element's parent has height style. In this case the element's parent is the body and the body has no height.

You have 2 ways to fix this:

Set the body height.
Change the option from 100% to whatever you want like 100px like in the example below: (Also, remove the unnecessary css code. The plugin take care about it.)

$(document).ready(function(e) { 
  $('.bloqueL').slimscroll({
    color: '#212121',
    size: '10px',
    height: '100px',
    alwaysVisible: true
  });
});

/*.bloqueL{
position: absolute;
left: 0px;
top: 0px;
height:100px;
width: 420px;
min-height: 10px;
border:1px solid #000000;
overflow-x: hidden;  
overflow-y: hidden; 
}*/

* {
  box-sizing:border-box;  
}

.bloqueL {
  border:1px solid #000;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://madeindreams.ca/JS/jquery.slimscroll.min.js"></script>

<body>
  <div id="boxL" class="bloqueL" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
  </div>
</body>