Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,263,501
Community Members
 
Community Events
164
Community Groups

AUI Dropdown with scrollbar

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

3 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted

Hi,

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

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

Just add below

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

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.

TAGS
Community showcase
Published in Jira

You will no longer be able to switch back to the old Issue Create experience starting June 2022

Greetings Jira Community, TLDR: We will be removing the option to switch back to the old Issue Create experience starting June 2022. You might have already gathered from our previous post (here...

104 views 0 4
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you