1

i am using standard html table on click of i am opening a modal . When user is at bottom of the table or somewhere middle, when clicked the modal is opening at top of the page and user has to again scroll up to see the modal . below is the screenshot where backdrop is not covering the entire page and the modal is at top of the page

enter image description here

HTML

<template>
    <lightning-card variant="Narrow" title="Call Block Manager" icon-name="standard:voice_call">
        <template if:true={showTable}>
            <c-paginator records={records} total-records={records.length} show-search-box="true"
                onpaginatorchange={handlePaginatorChange} class={pagi} device-is-mobile="true">
            </c-paginator>
        </template>
        <lightning-combobox
            class="slds-is-resizable dv-dynamic-width slds-p-right_xx-small slds-p-left_xx-small slds-m-bottom_x-small"
            name="progress" label="" value={value} placeholder="Sort By Date" options={sortOptions}
            onchange={handleSortChange}>
        </lightning-combobox>
        <div id="containerDiv" class="slds-table_header-fixed_container slds-border_right slds-border_left">
            <table class="slds-table slds-table_header-fixed slds-table_resizable-cols slds-table_fixed-layout">
                <thead>
                    <tr>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth}
                            title="Company Name">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Company Name</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth}
                            title="Contact Name">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Contact Name</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth} title="Address">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Address</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth} title="Industry">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Industry</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th data-type="date" class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth}
                            title="Date Added">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Date Added</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth} title="Phone">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Phone</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template if:false={norecord}>
                        <template if:true={recordsToDisplay}>
                            <template for:each={recordsToDisplay} for:item="item" for:index="index">
                                <tr key={item.id} class="slds-m-top_xx-small">
                                    <td data-column="Company">
                                        <lightning-icon icon-name={item.iconToDisplay} size="x-small">
                                        </lightning-icon>&nbsp;
                                        {item.Company}
                                    </td>
                                    <td data-column="Name">{item.Name}</td>
                                    <td data-column="Address" style="white-space: normal;">{item.Address}</td>
                                    <td data-column="Industry">{item.Industry}</td>
                                    <td data-column="CreatedDate">
                                        {item.dateadded}</td>
                                    <td data-column="Phone" onclick={openmodal} data-index={index}>
                                        <lightning-icon icon-name="utility:call" size="x-small">
                                        </lightning-icon>
                                        <a href={item.ph} value={index}>{item.Phone}</a>
                                    </td>
                                </tr>
                            </template>
                        </template>
                    </template>
                </tbody>
            </table>
            <template if:true={norecord}>
                <h1 class="slds-text-heading_medium" style="text-align: center;color: red;">No record Found</h1>
            </template>
        </div>
    </lightning-card>
    <template if:true={showModal}>

        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
            aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning-button-icon variant="border-filled" class="slds-modal__close" onclick={handleCancel}
                        icon-name="utility:close" alternative-text="Close" title="Close"></lightning-button-icon>
                    <h2 class="slds-modal__title slds-hyphenate">Update Activity</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium my-modal-inputs">
                    <lightning-tabset variant="scoped">

                        <lightning-tab label="Update Activity">
                            <template if:true={showActivity}>
                                <lightning-layout multiple-rows>
                                    <lightning-layout-item size=6 class="slds-m-top_small">
                                        <lightning-input type="text" label="Name" value={name} readonly>
                                        </lightning-input>

                                    </lightning-layout-item>
                                    <lightning-layout-item size=6 class="slds-m-top_small">
                                        <lightning-input type="phone" label="Phone" value={phonetodisplay} readonly>
                                        </lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=6 class="slds-m-top_small">
                                        <lightning-input type="text" label="Company Name" value={companyname} readonly>
                                        </lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-input label="Subject" value={sub}></lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <template if:true={calldispositionPicklist.data}>
                                            <lightning-combobox name="Call Block Disposition"
                                                label="Call Block Disposition" value={value}
                                                options={calldispositionPicklist.data.values} onchange={handleChange}>
                                            </lightning-combobox>
                                        </template>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-input label="Schedule Follow Up on Next Call Block"
                                            value={followupcheck} type="checkbox" onchange={handleFollowUpChange}
                                            checked={followupcheck}>
                                        </lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-textarea label="Notes" value={inputNoteValue}
                                            onchange={handleNoteChange}>
                                        </lightning-textarea>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-button onclick={handlesave} label="Save And Continue" variant="brand"
                                            style="float: right;">
                                        </lightning-button>
                                        <template if:true={isLoaded}>
                                            <lightning-spinner style="height: 27rem;margin-top: 8rem;" variant="brand"
                                                alternative-text="Loading Tasks" size="medium">
                                            </lightning-spinner>
                                        </template>
                                    </lightning-layout-item>
                                </lightning-layout>
                            </template>
                            <template if:false={showActivity}>
                                <h1 style="color: red;">Please select activity to proceed</h1>
                            </template>
                        </lightning-tab>
                    </lightning-tabset>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open" style="height: 100rem;"></div>
    </template>
</template>

CSS

.slds-modal__container {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
 }

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { border: 2px solid rgb(176 173 171); }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee; */
        position: relative;
        padding-left: 30%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);
        border-color: darkgrey !important;
        color: #000;
        font-weight: bold;
    }

}
1
  • any ideas to this issue? Jun 18, 2021 at 11:36

1 Answer 1

0

Well, I had the same problem, and I think this is the correct way to modal works on mobile, if we think I little if the modal didn't open at the top it could open out of the screen.

Any way to solve the problem in my project I have removed the modal from the mobile, using form factor, I render the modal's content directly on the current component instead the modal.

let me know if helps.

Regards

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .