CODEWITHSUNDEEP
javascriptcsstinyscrollbar
Alex
Alex

Reputation: 38519

Part of div hidden with tinyscrollbar until window is resized

I'm having a strange issue with

I've created a fiddle at http://jsfiddle.net/alexjamesbrown/oqu54cav

In the source, there's a <li> element at line 153 that says 'THIS SHOULD BE VISIBLE'
However, when initially running it, it's not visible in the scroll window.

If I resize the window, even a tiny bit, the rest of the items are visible as expected

I'm struggling to see a) what is causing this, and b) why it fixes itself on resize?

Upvotes: 0

Views: 218

Answers (1)

JakeParis
JakeParis

Reputation: 11210

If you turn off prettycheckable, you can see that the problem doesn't happen. I believe this is happening because the scrollbar plugin reads the height of the div before the checkboxes are made larger by the prettycheckable plugin. So the height of the div is set, the scrollbar is generated, then the checkboxes are enlarged with the other plugin.

Right now you are styling the heights for the generated elements. Those only come into play once the javascript has evaluated. In order to fix this, you need to style the elements in the real html. For example, this solves your problem:

.overview li {
    height: 2.5em;
}

Because the .overview li is there before the checkboxes are "prettyfied" and then when they are generated, they don't make that element any larger.

Upvotes: 1

Related Questions