-
Notifications
You must be signed in to change notification settings - Fork 167
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IFrame does not scroll if src includes an id anchor tag (/view#id) #20206
Comments
The issue can also be reproduced without an IFRAME. UI.getCurrent().getElement().executeJs("""
setTimeout(() => {
$0.scrollIntoView();
}, 0);
""", scrollElement); If the anchor cannot be fixed at compile time, the anchor can be read from the location object, something like UI.getCurrent().getElement().executeJs("""
setTimeout(() => {
const el = document.location.hash && document.getElementById(document.location.hash.replace("#",""));
if (el) {
el.scrollIntoView();
}
}, 0);
"""); |
@mcollovati I'm assuming you're saying that even just navigating to a page with an anchor tag does not work? For example, this does not scroll to the correct element. The // from somewhere (click this in ui)
var a = new Anchor("/home#span80", "Navigate To");
add(a);
// home view
@Route(value = "home")
public class HomeView extends VerticalLayout {
public HomeView() {
IntStream.range(0, 100).forEach(i -> {
var span = new Span(i + "");
span.setId("span"+i);
add(span);
});
}
} |
@drewharvey exactly. I think the snippet I posted above should be automatically executed by Flow client once the page is loaded. |
Actually, the anchor might work, since it should be intercepted by the router and should not reload the page, but I'm not sure the hash is handled. |
Description of the bug
When a src is set that contains an anchor tag, such as "#some_id", the iframe will not scroll to that element after being loaded.
Expected behavior
As in a normal html iframe element, the contents of the iframe should automatically scroll to the element id listed in the src's anchor tag.
Minimal reproducible example
Versions
The text was updated successfully, but these errors were encountered: