lizmap-web-client icon indicating copy to clipboard operation
lizmap-web-client copied to clipboard

[Bug]: Using a lizmap map as iframe inside bootstrap site: auto scroll to the iframe

Open rmarzocchi84 opened this issue 3 years ago • 9 comments

What is the bug?

When I use a lizmap map on an iframe inside a bootsrap HTML page the page automatically scroll on the lizmap map.

Steps to reproduce the issue

Here a simple example of a webpage which use a lizmap map (for the test I use a demo map, but you can try with each lizmap map):

<html>

<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">


</head>

<body>
<div id="wrapper">
<h2> TEST no js incluso - da iniettare </h2>

<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>
<br>
<br>
<h1> aaa </h1>

                                            
<iframe  id="openstreet-map1" name="openstreet-map1-name" src="https://demo.lizmap.com/lizmap/index.php/view/map/?repository=demo&project=Demo_plu"border="0" style="margin: 0px; padding: 0px; height: 694.156px; width: 100%; min-height: 320px; border: none; overflow: hidden;"></iframe>

</div>

</body>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</html>

Versions

Lizmap 3.5.X QGIS Server 3.22.X

Check Lizmap plugin

  • [x] I have done the step just before in the Lizmap QGIS desktop plugin before opening this ticket. Otherwise, my ticket is not considered valid and might get closed.

QGIS server version, only if the section above doesn't mention the QGIS Server version

No response

Operating system

Ubuntu 20.04

Browsers

Firefox, Chrome, Microsoft Edge

Browsers version

All recent versions

Relevant log output

No response

rmarzocchi84 avatar Nov 17 '22 10:11 rmarzocchi84

Can I do something else? It seems not related to this issue https://github.com/3liz/lizmap-web-client/issues/645

rmarzocchi84 avatar Dec 16 '22 11:12 rmarzocchi84

blind guess : some js events force the focus on the iframe, so the browser scroll to it

a solution can be made using custom js script, once the ui is loaded to force window.parent to scroll in top

 lizMap.events.on({ 

    uicreated: function(e) {
        window.parent.scrollTo(0,0);
    }
});   

nworr avatar Dec 22 '22 11:12 nworr

blind guess : some js events force the focus on the iframe, so the browser scroll to it

a solution can be made using custom js script, once the ui is loaded to force window.parent to scroll in top

 lizMap.events.on({ 

    uicreated: function(e) {
        window.parent.scrollTo(0,0);
    }
});   

It works but only for simple page.. I try also with widow.self.scrollTo(0,0); but it doesn't work

rmarzocchi84 avatar Dec 30 '22 12:12 rmarzocchi84

sorry @Gustry do you expect more feedbacks from me? The solution proposed by @nworr doesn't work very well

rmarzocchi84 avatar Jan 16 '23 15:01 rmarzocchi84

@rmarzocchi84 I'm facing the same problem. Did you find a solution ?

tportier avatar Aug 22 '24 13:08 tportier

unfortunately no

rmarzocchi84 avatar Aug 26 '24 07:08 rmarzocchi84

A public example can be found here: https://noe.gard.fr/observatoire/information-preventive-et-sensibilisation/reperes-de-crue.html

Same issue

mdouchin avatar Mar 25 '25 12:03 mdouchin

A public example can be found here: https://noe.gard.fr/observatoire/information-preventive-et-sensibilisation/reperes-de-crue.html

Same issue

same problem at https://www.centipede-rtk.org/ and https://docs.centipede.fr/.

Is there any way of improving this problem, as it has been recurring for a long time?

jancelin avatar Apr 10 '25 09:04 jancelin

@laurentj , do you have any idea where this autofocus is coded please?

jancelin avatar May 06 '25 14:05 jancelin