AUI Dropdown with scrollbar

[Frédéric Tardieu]

Hi all,

Is it possible to have scrollable options list when using an AUI dropdown (https://docs.atlassian.com/aui/latest/docs/dropdown2.html), as for a normal html <select>?

When the option list is too long, it may go outside screen bottom, and some options may be impossible to reach...

Thanks,

Fred

[Frédéric Tardieu · Accepted solution]

Hi,

I found how to do this: adding overflow & max-height CSS properties, like this (from AUI Sandbox Dropdown example):

<!-- Simple Dropdown - trigger -->
<p>
<a href="#dwarfers" aria-owns="dwarfers" aria-haspopup="true" class="aui-button aui-dropdown2-trigger aui-style-default">Shipmates</a></p>
<!-- Simple Dropdown - dropdown -->
<div id="dwarfers" class="aui-dropdown2 aui-style-default" style="overflow:auto;max-height:150px;">
    <ul class="aui-list-truncate">
        <li><a href="http://example.com/">Lister</a></li>
        <li><a href="http://example.com/">Rimmer</a></li>
        <li><a href="http://example.com/">Cat</a></li>
        <li><a href="http://example.com/">Kryten</a></li>
        <li><a href="http://example.com/">Lister</a></li>
        <li><a href="http://example.com/">Rimmer</a></li>
        <li><a href="http://example.com/">Cat</a></li>
        <li><a href="http://example.com/">Kryten</a></li>
        <li><a href="http://example.com/">Lister</a></li>
        <li><a href="http://example.com/">Rimmer</a></li>
        <li><a href="http://example.com/">Cat</a></li>
        <li><a href="http://example.com/">Kryten</a></li>
        <li><a href="http://example.com/">Lister</a></li>
        <li><a href="http://example.com/">Rimmer</a></li>
        <li><a href="http://example.com/">Cat</a></li>
        <li><a href="http://example.com/">Kryten</a></li>
        <li><a href="http://example.com/">Lister</a></li>
        <li><a href="http://example.com/">Rimmer</a></li>
        <li><a href="http://example.com/">Cat</a></li>
        <li><a href="http://example.com/">Kryten</a></li>
        <li><a href="http://example.com/">Lister</a></li>
        <li><a href="http://example.com/">Rimmer</a></li>
        <li><a href="http://example.com/">Cat</a></li>
        <li><a href="http://example.com/">Kryten</a></li>
    </ul>
</div><!-- .aui-dropdown2 -->

[Anil]

Just add below

style="overflow:auto;max-height:150px;"

[Yagnesh Bhat]

Hi Frederic,

Try tweaking this in the atlassian sandbox : https://docs.atlassian.com/aui/latest/sandbox/#. Check out the Dropdown library under this.

All these are the only available GUI options of the Atlassian products.