How do I make the image responsive in Mobile APP

rafas_2703
Tera Guru

‎03-22-2024 04:41 AM - edited ‎03-22-2024 04:54 AM

Hi everyone, how are you all going?

 

I have a problem in hands. I have a variable on my record producer that appears well in the ESC Portal while in computer screen, but in the mobile it doesn't look good.

 

Can anyone help me fix it?

The images of the Portal and mobile are attached.

 

The variable is appearing trough html and css in a widget I have, with the following code:

HTML:

 

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

<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>

 

 

CSS:

 

/* Global styles */
.toggle-label img {
    width: 40px; 
    height: auto; 
    margin-right: 10px;
}

.button {
    background-color: white;
    border-color: rgb(192, 192, 192);
}

.div1 {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    align-items: center; /* Align items vertically */
}

.div1 h4 {
    margin-left: 10px;
    font-family: SourceSansPro, Helvetica, Arial, sans-serif;
    font-size: 15px;
}

#div2 {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

 

 Appreciate all the help I can get.

 

PS: The functionality of the search of the users table works in the Desktop but doesn't in mobile. Could use some help on that as well.

 

Kind regards,

Sérgio

Preview file
4 KB
Preview file
33 KB
0 Helpfuls
  • 794 Views
1 REPLY 1

Murthy Ch
Giga Sage

‎03-23-2024 06:35 PM

Hi @rafas_2703 

This is because you set the width of the image to 40px. Instead, use the below code to ensure the image displays correctly in smaller screens aswell.

.toggle-label img {
    max-width: 40px; /*made changes here...  */
    height: auto;
    margin-right: 10px;
}

Also, Why don't you use the OOB list collector variable which is provided by SN? It performs the same functionality.

Thanks,
Murthy
0 Helpfuls