I have an application where there is a list of items from a table, each of which has a series of actions represented as links. These actions open a modal to display additional content. In SF1, the view is smaller so the list expands beyond and page, forcing the use to scroll, which is fine. What is not fine is how the modals pop up at the top of the page even if I am scrolled to the bottom. So if I open a modal at the bottom of the table, the screen grays out but it is not obvious that a modal appeared until the user scrolls back up to the top. Is there a Salesforce way to position the modal to appear in the center of the visible screen? I have tried using basic CSS such as:

#customDiv {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;


But it still will not center. Any ideas?


TL;DR : Modals in desktop or SF1 version do not center in viewable page but entire page. Is this solvable?

  • I believe that the modal dialog CSS style isn't supported in SF1 for whatever reason. Even in the SLDS docs, they state that their modal dialog style isn't SF1 compatible. – sfdcfox Jan 18 '17 at 2:07
  • Modals are not supported however Prompt's are supported and work well in SF1. Probably if you can tailor this to include a table, it will work fine for you. Notification Prompt – manjit5190 Jan 18 '17 at 3:18
  • It seems even in regular desktop mode the modal will not appear in center of the viewable page but of the entire page. – Angelo Jan 19 '17 at 16:10
  • @sfdcfox then how to achieve that in SF1?? Suggestions please – DOMINIC EDWARD Feb 27 '17 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.