Recently met with a strange small issue like setting up the focus. In one of the project, I have the AppPart and an lengthy App hosted inside that. Hence, both the SharePoint Site as well as the AppPart is having the Scroll Bars as shown in the figure.
Now, the issue was like at the bottom of the app, I have a submit button and on click of the submit button, the scroll should move up and focus should be set on the mandatory fields, which were not given the inputs. I tried with the asusual focus methods and the setfocus etc.,
But everything was working with the normal pages. But when I deploy inside this iFrame, nothing works. And the most important thing is, the SharePoint and the AppWeb are hosted on different domains. Since the document.domain differs, we cannot call the DOM Object.
While doing some googling, found a solution for this issue. The native JavaScript code will be very much helpful for this scenario.
Just a small div surrounding the control. Then we need to use the method scrollIntoView().
if (($("#ddlDate").val() === "") || ($("#ddlDate").val() === "null")) {
document.getElementById("divDueDateCtrl").scrollIntoView();
}
Though it seems very small, it ate some hrs of my time to fix.
Happy Coding,
Sathish Nadarajan.
Leave a comment