PDA

View Full Version : [1.1] BorderLayout internal link scrolling issue using Firefox


seade
8 Aug 2007, 9:51 PM
Ext version: 1.1
Adapter: ext-base.js
OS: Windows XP
Browser: Firefox 2.0 (does not occur in IE7 and Opera)

Description of problem:
The attached code presents a very simple BorderLayout - only north and center are used (please make sure your browser is not so tall as to require no vertical scrollbar in the center panel).
The center panel contains a link, bottom, that is intended to scroll the content of the center panel only.
The scrolling occurs correctly in the IE7 and Opera (I think IE6 is okay too, but I have not loaded this specific test case in IE6), but in Firefox the north panel is pushed off the screen in order to get the "bottom" anchor within the center panel closer to the top of the page.

Example: Modified from examples/layout/complex.html (put the following in a file at this location for script references to work)


<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
Simple = function() {
return {
init : function() {
var mainLayout = new Ext.BorderLayout("layout-div", {
north: { initialSize: 100 },
center: { }
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', { }));
mainLayout.add('center', new Ext.ContentPanel('center-div', {
fitToFrame: true, autoScroll: true
}));
mainLayout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);
</script>
</head>
<body>

<div id="layout-div">
</div>

<div id="north-div">
<p>This is north-div.</p>
<p>Clicking on the <em>bottom</em> link below will scroll the content within center-div correctly in IE and Opera, but screw things up badly with Firefox.</p>
</div>

<div id="center-div">
<p><a href="#bottom">bottom</a></p>
<div style="border:1px solid black;height:400px;margin:2em;">Block - just to take up some space</div>
<p><a name="bottom">Bottom!</a></p>
<div style="border:1px solid black;height:300px;margin:2em;">More space</div>
</div>

</body>
</html>
jack.slocum
9 Aug 2007, 7:58 AM
This is internal Firefox functionality. We don't control in document linking via anchors. Why not report the bug on the Firefox bug tracker?
seade
10 Aug 2007, 5:11 AM
This is internal Firefox functionality. We don't control in document linking via anchors. Why not report the bug on the Firefox bug tracker?
If I create a page that uses the same css (and no ExtJS) to render a north and center with the latter being "position:absolute;overflow:auto" the problem does not occur:

<html>
<head>
<style type="text/css">
#north-div {
height: 98px;
overflow: hidden;
}
#center-div {
border: 1px solid #98C0F4;
height: 612px;
width: 99%;
top: 100px;
position: absolute;
overflow: auto;
}
</style>
</head>
<body>

<div id="layout-div">
</div>

<div id="north-div">
<p>This is north-div.</p>
<p>With no Ext, clicking on the <em>bottom</em> link below will scroll the content within center-div correctly in Firefox too.</p>
</div>

<div id="center-div">
<p><a href="#bottom">bottom</a></p>
<div style="border:1px solid black;height:400px;margin:2em;">Block - just to take up some space</div>
<p><a name="bottom">Bottom!</a></p>
<div style="border:1px solid black;height:300px;margin:2em;">More space</div>
</div>

</body>
</html>
So it would seem that ExtJS is adding something into the mix that is somehow contributing to the problem.

There are certainly issues relating to links within absolutely positioned divs that detract from their utility - I have used my attempt at reproducing this problem without using ExtJS to report one (https://bugzilla.mozilla.org/show_bug.cgi?id=391664).

My guess would be that an iframe would not exhibit this problem.

Scott