My custom dropdown variable is not working in mobile

[rafas_2703]

Hi everyone!

I have a variable that is being created by a widget, it being sn-record picker type. The variable works properly in the desktop view but in mobile it doesn't even open.

The html code used to create the variable is:

<div class="div1">
    <button class="button"><img style="height: 30px; width: 100%" src="sn_hr_core.watchlist_eye.png"></button>
    <h4 style="margin-left: 10px; font-family: SourceSansPro, Helvetica, Arial, sans-serif; font-size:15px">Watchlist</h4>
</div>

<div id="div2" style="display: none;">
    <div class="watchlist-container">
        <!-- Seu HTML para Watchlist aqui -->
        <span class="watchlist">
            <div class="text-muted light field">
                <div class="picker">
                    <sn-record-picker field="username" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="10" multiple="true" default-query="'active=true^nameISNOTEMPTY^u_myhr_opcoDYNAMIC9e0801c01b6e74500f156280604bcb96'"></sn-record-picker>
                </div>
            </div>
        </span>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $(".button").click(function(){
            $("#div2").toggle();
        });
    });
</script>

 In the Employee Center Portal the drop down appears ok but in mobile it only appears the layout, nothing else.

Can anyone help?

Thanks!