Up and Down arrows not working with DIV scrollbars

Question

I am using w3.css, creating a drop-down search. The search results are displayed in the drop-down after the ajax-powered search is completed. There is a DIV that is populated with the search results, with overflow-y set to auto (or scroll). When I click on the up or down arrow of the scroll bars that result or when I try to move the scroll position indicator up and down, the contents of the div do not adjust up or down. When my mouse is hovering inside the div and I use the mouse wheel, the contents do adjust, and the scroll position indicator moves up and down as well.

I have tried changing the overflow-y between auto and scroll, and I have tried adjusting the height of the div.

<div class="w3-dropdown-click">
    <button type="button" class=" w3-button w3-hide-small w3-padding-medium w3-hover-theme" title="Search" onclick="advancedsearch_click()"><i class="fas fa-search-plus"></i> Advanced Search</button>
    <div class="w3-dropdown-content w3-bar-block w3-theme-l3 " id="advsearchboxdiv">
        <span class="w3-bar-item w3-border w3-border-theme w3-medium w3-padding-small">
            Name<br><input type="text" class="w3-medium w3-border w3-border-theme" style="width:200px;height:30px;" id="searchname" name="searchname">
        </span>
        <span class="w3-bar-item w3-border w3-border-theme w3-medium w3-padding-small">
            Country<br><input type="text" class="w3-medium w3-border w3-border-theme" style="width:200px;height:30px;" id="searchlocation" name="searchlocation">
        </span>

    <div id="searchresults" style="display:none;height:75px;overflow-y:scroll;" class="w3-padding-small"></div>

    <button id="searchgobutton" type="button" class="w3-bar-item w3-button w3-center w3-hide-small w3-theme-d2 w3-padding-small w3-hover-theme" title="Search" onclick="dosearch_click()">Go</button>
</div>

Each of the result items of the search are contained in a button, which is populated using the ColdFusion CFOUTPUT tag:

<cfoutput query="qSearch">
     <button type="button" class="w3-bar-item w3-button w3-center w3-hide-small w3-theme-d2 w3-margin-tiny w3-padding-tiny w3-hover-theme" >#qSearch.item#</button>
</cfoutput>

What must I do to get the vertical scroll bars working ?

Could you please provide the CSS that you are currently using? — Chif, Aug 13 '19 at 18:05
Thank you for responding and giving that information. I'm try to reproduce the issue, but I'm failing to do so without the JS too. — Chif, Aug 13 '19 at 18:11
The JS uses jQuery to execute an Ajax call to a database, resulting in the button code shown above for each result item, then added to the searchresults div using $("#searchresults).html(data) — RickInWestPalmBeach, Aug 13 '19 at 18:13
is the div `#searchresults` supposed to be within the div `.w3-dropdown-click` ? It's still really difficult to reproduce your issue, so just shooting in the dark here. — Chif, Aug 13 '19 at 18:26
Yes it is. https://www.w3schools.com/w3css/w3css_dropdowns.asp — RickInWestPalmBeach, Aug 13 '19 at 18:28
I am not able to reproduce it either when I use the code by itself. — RickInWestPalmBeach, Aug 13 '19 at 18:33
I figured it out. There is a carousel directly underneath where it drops down, and the left-advance button of the carousel is exactly where the scroll bar is. It could be a z-index issue. I will let you know. — RickInWestPalmBeach, Aug 13 '19 at 18:47
It turns that I had to change the height of the Bootstrap 4 carousel prev/next controls, and alter top margin so that it will always be above the top of the scroll bar. — RickInWestPalmBeach, Aug 13 '19 at 19:09

Up and Down arrows not working with DIV scrollbars

0 Answers0