I have noticed that the modal popup shows on top of the page rather than at the center of the user screen. Is there a way we can position the modal based on the user screen? Also, I noticed that the background is not locked as it happens on the desktop, I am still able to click on the background page and make selections.
Js:
connectedCallback() {
if (FORM_FACTOR == "Large") {
this.modelSecionStyle = 'slds-modal slds-fade-in-open slds-backdrop slds-backdrop_open';
} else if (FORM_FACTOR == "Small") {
this.modelSecionStyle = 'slds-fade-in-open slds-backdrop slds-backdrop_open mobileCenter';
}
}
--------------
css:
.mobileCenter {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2000PX;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
padding: 16px;
box-sizing: border-box;
}
.mobileCenter .slds-modal__container {
top: 10px;
left: 0;
width: 100%;
height: 1000PX;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: white;
margin: 0;
box-shadow: none;
}
.mobileCenter .slds-modal__header {
border-radius: 16px 16px 0 0;
padding: 20px 16px;
text-align: center;
border-bottom: 1px solid ;
flex-shrink: 0;
}
.mobileCenter .slds-modal__content {
overflow-y: auto;
flex: 1;
padding: 16px;
max-height: none;
-webkit-overflow-scrolling: touch;
}
.mobileCenter .slds-modal__footer {
position: sticky;
bottom: 0;
background: white;
border-top: 1px solid ;
padding: 12px 16px;
display: flex;
justify-content: flex-end;
gap: 12px;
flex-shrink: 0;
border-radius: 0 0 16px 16px;
}
