Can't Get Scrollbar To Show

HTML & CSS
1

Hey,

I have an autocomplete tool that I love. The dream is to just have a vertical scrollbar but I cannot get it to load.

CSS For the auto suggestion/auto complete box:

.suggestionsBox {
        position: relative;
        left: 530px;
        margin: 2px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000;    
        color: #fff;
        z-index: 1000;
[B]        overflow:scroll;[/B]

    }

The html code that calls it:

<p style="margin-left: 14" align="left">
                <br />
            </p>
            <div class="[B]suggestionsBox[/B]" id="suggestions" style="display: none; 
">
                <img src="http://www.site.com/autoComplete/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                </div>
            </div>
    
</div>
</div>

The auto complete script works fine. I pull 30 questions at a time when somebody types a keyword but it just shows a large block with the ‘scroll bar’ area without the scroll bar. Look at your browser, towards the right, and see the area behind the actual scroll bar that you see. Imagine if it was without the actual blue scroll bar - that is what I get.

For proprietary reasons, I cannot link to the site but it’s all based on the Auto Complete script here:

http://www.nodstrum.com/2007/09/19/autocompleter/

So that’s what I am working with. I just want that black box, when the results spill past the original height, displays that vertical bar like you see at the right of your browser.

Thanks for your time.

PS. I only showed the CSS of the black ‘suggestion box’ but if you need the entire CSS, here it is:

<style type="text/css">
    body {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }
    
    h3 {
        margin: 0px;
        padding: 0px;    
    }
    


    .suggestionsBox {
        position: relative;
        left: 530px;
        margin: 2px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000;    
        color: #fff;
        z-index: 1000;
        overflow:auto;

    }
    
    .suggestionList {
        margin: 0px;
        padding: 0px;
    }
    
    .suggestionList li {
        
        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }
    
    .suggestionList li:hover {
        background-color: #659CD8;
    }
</style>
2

SOLVED IT - I am an idiot

I had assumed we had a ‘height’ value in the .suggestionbox class
Nope. So I added it and, of course, the scroll appears when I use
overflow:auto;

SO, for those that want the same solution, and many people seem to want this, there you go.