Search code examples
jquerycssscrollbarjscrollpanejquery-jscrollpane

jScrollPane is cutting my hidden content

I'm working on http://goo.gl/dB4Zw

When you click on link 'opsirnije', hidden div 'content-readmore' will show.

Now the problem is that when you click on the second link 'opsirnije', half of the content is not shown.

For over several hours I didn't found any solution, except that it partially work when I remove 'position: relative' from .jspContainer and when there is no 'display: none' on .content-readmore'.

Div '.content-readmore' must be hidden until someone click on link named 'opsirnije', and therefore I hide it with $('.content-readmore').css({display: 'none'}). When I don't have this line, then scroller normal work (it displays content without cutting).

Option 'autoReinitialise' is set to true, but it didn't help.

Problem must be somewhere in my CSS code, but I can't find it.

Solution

  • Are you setting the height of .article when you click on 'opsimije'? It might be jScrollPane doing it. Either way that's where your problem is. Something is setting the height of .article with inline style.

    <div class="article" style="height: 395px;">

    Quick fix is to override the height in your CSS like this:

    .article { height:auto !important; }

    Or you could figure out what's setting the height and fix it there.