Part of div hidden with tinyscrollbar until window is resized

Question

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?

I tried taking out most of your list (I left only 9 list items) and the problem still occurs. fyi — JakeParis, Nov 06 '14 at 02:12

JakeParis · Accepted Answer · 2014-11-06T02:50:00.450

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.

hmm, ok.. is there any way to fix it? – Alex Nov 06 '14 at 02:37 — Alex, Nov 06 '14 at 02:37

Part of div hidden with tinyscrollbar until window is resized

1 Answers1