Possibility to make drop down menu scrollable in Odoo tree view

Question

Is there a possibility to add a scrollbar into the dropdown list of the treeview ?

When more records are added than in the shown screenshot, some of the fade in columns cannot be seen and I have to scroll down to the end of the tree view list to select these columns.

How can I add a scrollbar into the dropdown menu, without scrolling down to the page but only in the dropdown menu(red bordered) ?

My CSS:

 .dropdown-menu {
    height: 10px;
    overflow-y: auto;
} 

My XML:

<odoo>

    <template id="asset_contacts_addon" name="contacts addon assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" type="text/css" href="/contacts_addon/static/src/css/contacts_addon.css"/>
        </xpath>
    </template>

<record id="contacts_addon_tree_view" model="ir.ui.view">
        <field name="name">view.contacts.addon.tree</field>
        <field name="model">res.partner</field>
        <field name="inherit_id" ref="base.view_partner_tree"/>
        <field name="arch" type="xml">

<p class="dropdown-menu">
    <field name="display_name" position="after">
        <field name="customer_codename" optional="hide"/>
    </field>
     <field name="customer_id_previous" position="after">
        <field name="klm_key" optional="hide"/>
    </field>
</p>

    <field name="customer_codename" position="after">
       <field name="id"/>
     </field>
     <field name="id" position="after">
       <field name="customer_id_previous"/>
     </field>

 </field>
</record>

Answer 1

One thing you can do is to edit the CSS to set the menu's height and overflow-y in the dropdown-menu class.

.dropdown-menu {
    height: 200px; 
    overflow-y: auto;
}

height is the vertical size of the element. You can set the height to the size you want.

overflow-y is a configuration for vertical scroll of the element. Setting it to auto will often result in what you need.

The result should look something like this.