MarekChr
MarekChr

Reputation: 1160

Vaadin 24 iframe is not scrolling to fragment on first load

I am trying to scroll to the fragment element on first iframe load (default browser behavior when there is #<elementId> in the url), however I have been unsuccessful so far.

In url, there is an id of an element after '#' sign, like: mydomain.com/test#h1_id. I made sure that particular element with h1_id exists in the html that is loaded into iframe.

The way the iframe loads is like this: user clicks an <a> element that has a target of that iframe: <a href="mydomain.com/test#h1_id" target="iframename">2c)</a>.

Iframe looks like this: <iframe style="flex: 1 1 50%; width: 100%; height: 100%;" name="iframename" frameborder="0" id="iframename" slot="secondary"></iframe>.

When it loads it does not scroll to the fragment immediately, but once it is loaded and user clicks on <a> another time, it scrolls.

Minimal example:

Route where the <a> element and <iframe> is present:

@Route("/foo")
public class MyLayout extends VerticalLayout {
    public MyLayout() {
        val anch = new Anchor();
        anch.setTarget("iframename");
        anch.setHref("/goo#h1_id"); // or any other url, in my case it is localhost (same origin, or browsers will show warning/error)
        anch.setText("CLICK ME");
        val iframe = new IFrame();
        iframe.setName("iframename");
        iframe.setId("iframename");
        iframe.setSizeFull();
        add(iframe);
        add(anch);
    }
}

Route to show in iframe:

@Route("/goo")
public class Hello extends VerticalLayout {
    public Hello() {
        // long paragraph so it actually takes some height
        val text = new Span(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
                "Pellentesque molestie ultricies lectus ac rhoncus. Quisque auctor venenatis metus," +
                " et tincidunt elit scelerisque in. Donec a magna eget arcu euismod iaculis. Integer " +
                "eget finibus turpis, sed faucibus ligula. Aliquam sed sodales ligula. Aliquam erat volutpa" +
                "t. In sed aliquam elit. Orci varius natoque penatibus et magnis dis parturient montes, nasc" +
                "etur ridiculus mus. Donec tincidunt est aliquet ullamcorper mollis. Integer id sem eu libero " +
                "euismod facilisis nec id turpis. Nullam ullamcorper feugiat fringilla. Nullam ultricies volutpat d" +
                "ui, eu varius dui condimentum eu. Curabitur in lectus faucibus, pellentesque risus et, semper dui.");
        text.addClassName(LumoUtility.FontSize.XXLARGE);
        val scrollElement = new Span("Element to scroll to");
        scrollElement.setId("h1_id");

        add(text, scrollElement);
    }
}

Behavior that I want to achieve (scroll on first iframe load) the way i described above is functional in Vaadin 8, however when we migrated to 24, it does not work. Are there any ways to make it work? I tried scrolling to it programatically in route constructor or in AfterNavigation, or in BeforeEnter, and using javascript load hooks, however it did not help.

Upvotes: 0

Views: 96

Answers (0)

Related Questions