PDA

View Full Version : Panel stops scrolling



coldfiltered
12 Apr 2007, 5:51 PM
I'm experimenting with one of the examples - Layouts - Complex Layout

The only changes I've made is to the script locations and moving the page css and javascript blocks to separate files.

I came across a bit of odd behaviour - when you close the center panels 'close me' tab, the scroll bar on the remaining center tab no longer scrolls the text using IE 7.0.5730.11!

My experimental page was originally a .aspx page, so the form viewstate was added automatically.

Remove this ViewState div from the code below and it works okay!:

<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA1NDkzNTkwMmRkSkgMb+dqJgB82spc9l+9/FYdypQ=" />
</div>

Can this be fixed?

Page Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="ScriptLibrary/extJS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="Default.css" />

<script type="text/javascript" src="ScriptLibrary/extJS/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ScriptLibrary/extJS/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ScriptLibrary/extJS/ext-all.js"></script>
<script type="text/javascript" src="Default.js"></script>
</head>
<body>
<form name="pageForm" method="post" action="Default.aspx" id="pageForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA1NDkzNTkwMmRkSkgMb+dqJgB82spc9l+9/FYdypQ=" />
</div>
<div id="container">
<div id="west" class="x-layout-inactive-content">
Hi. I'm the west panel.
</div>
<div id="north" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="autoTabs" class="x-layout-inactive-content">
The layout manager will automatically create and/or remove the TabPanel component
when a region has more than one panel. Close one of my panels and you can see what
I mean.
</div>
<div id="center2" class="x-layout-inactive-content">
<p>
<a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
<p>
My closable attribute is set to false so you can't close me. The other center panels
can be closed.</p>
<p>
The center panel automatically grows to fit the remaining space in the container
that isn't taken up by the border regions.</p>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales
a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis,
interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis
malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus.
In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla
vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor
laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi
nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus
tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum
porta, luctus in, leo.</p>
<p>
Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris
ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy,
augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam
eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit
malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt.
Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque
mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum
viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>
Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim.
Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan
ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae
nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis
commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies
sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus
ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue
vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum
pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium
magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla.
Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus,
lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc,
eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec
pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>
Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor
ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam.
Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit,
consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula
elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis.
Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor.
Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>
Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque
sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis,
sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at,
feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum
tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>
Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio
turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus
ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec
commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id
velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero.
Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo
sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>
Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla
quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas
lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales.
Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam
felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque
id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1" class="x-layout-inactive-content">
<p>
<b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>
Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor
ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam.
Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit,
consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula
elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis.
Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor.
Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>
Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque
sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis,
sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at,
feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum
tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>
Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio
turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus
ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec
commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id
velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero.
Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo
sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>
Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla
quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas
lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales.
Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam
felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque
id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" class="x-layout-inactive-content" style="width: 200px; height: 200px;
overflow: hidden;">
</div>
<div id="south" class="x-layout-inactive-content">
south - generally for informational stuff, also could be for status bar
</div>
</div>
</form>
</body>
</html>

coldfiltered
12 Apr 2007, 9:34 PM
I changed the HTML tag in the original 'Layout - Complex Layout' example from:


<html>

to:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Which is the standard template header for .aspx pages in VS 2005.

This triggers the behaviour I mentioned in the previous post.

Does anybody know why this would cause the panel to stop scrolling?

coldfiltered
12 Apr 2007, 10:29 PM
It seems to be the DOCTYPE that triggers the behaviour.

I didn't find one compatible DOCTYPE!

These didn't work when added to the 'Layout - Complex Layout' example and viewed in IE7:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Why isn't extJS compatible with doctypes in IE7?

jack.slocum
12 Apr 2007, 10:46 PM
ExtJS is fine with most doc types. There even people using it with XHTML even though it isn't officially tested.

There are a few threads on using a BorderLayout with ASP.Net. Although you are only changing 1 thing, ASP.Net will make it's own changes. There's is one thread in particular that may help you get it working (a sticky in the Help).

Also, you will probably have better results posting in help, not bugs.

coldfiltered
12 Apr 2007, 11:06 PM
Hi Jack thanks for replying.

Looking back over my posts I can see why you think i'm having a problem with asp.net, I should have explored the problem more before posting the original post :)

It isn't asp.net that seems to be the problem as I changed your complex.html example file and simply added the various doctypes to the top of the code. Loading the page in IE7 causes the non-scrolling behaviour.

Adding the doctypes has no effect on Firefox, the scrolling still works.

I had a look around the net and IE7 seems to be picky/strict about doctypes, i'm just concerned that it may be something in extJS that is tripping it up.

jack.slocum
13 Apr 2007, 3:39 AM
Ah, if it's IE that is the problem, it's a known issue in IE with almost any doc-type. It has nothing to do with Ext.

http://rowanw.com/bugs/overflow_relative.htm

In IE7 it is even worse because it seems to give the scrollbar the right size like it knows there's something it needs to scroll - only it never scrolls it.

A quick search landed me this informative thread:

http://extjs.com/forum/showthread.php?t=902&highlight=strict+doctype+scrolling

However, you will be happy to know there is a workaround. :D If your panel has any elements positioned relative and you really need to use a strict doctype, if you add position:relative on the main parent element (best if it's the one with the overflow:auto or a direct descendent), it will start scrolling again. Not sure why this works but it does.

coldfiltered
13 Apr 2007, 5:56 PM
Hi Jack,

Thanks for the info!

Ah Microsoft ...

Anyway just to let you know that setting: 'alwaysShowTabs: true' in the Ext.LayoutRegion config fixes the IE7 / doctype scrolling issue as well.

jack.slocum
13 Apr 2007, 6:04 PM
Yes, TabPanelItems are position:relative :)

SteveEisner
17 Apr 2007, 8:51 PM
However, you will be happy to know there is a workaround. :D If your panel has any elements positioned relative and you really need to use a strict doctype, if you add position:relative on the main parent element (best if it's the one with the overflow:auto or a direct descendent), it will start scrolling again. Not sure why this works but it does.

I've got multiple nested panels and haven't had any luck scattering position:relative around. It either makes more and more elements appear to be "fixed" position, or in some cases it caused the layout to break.

Can someone explain what the "main parent element" is in a default layout? .x-layout-panel? .x-layout-panel-body? etc. I tried to figure it out from the CSS but many styles are apparently added directly to the nodes...

Thanks!
Steve

jack.slocum
18 Apr 2007, 3:30 PM
The element that has the overflow auto.

SteveEisner
18 Apr 2007, 4:38 PM
Jack - thanks, but that's exactly what I'm asking. None of my own elements have overflow:auto. So to find out what might be causing the problem I'm going to have to trek through the 25-30 deep elements that have been created by Ext (tabpanels inside nested panels inside nested panels inside layouts) and figure out which element might have overflow: auto on it. Using firebug I see a lot of DOM nodes on which the overflow attribute has been added explicitly via style="", and there may be some CSS definitions specifying it too. I don't mind searching the DOM tree if I have to, but I'm hoping someone knows the structure well enough to tell me where I should look?

tryanDLS
18 Apr 2007, 4:47 PM
I think Jack meant which ever container you had autoscroll:true (the region or the panel) - that would be the one that gets overflow:auto

jack.slocum
18 Apr 2007, 6:59 PM
In general the best approach for scrolling is to use fitToFrame:true, autoScroll:true on the ContentPanel (not the region). With this setup you should not experience this scrolling issue if you are using tabs. If you are not using tabs, you can still set position relative on the element (your normal element, not a generated one) if your element is the one handling scrolling (via configs above).

SteveEisner
18 Apr 2007, 8:15 PM
Interesting - I think we are not doing it that way, because of a recommendation from an earlier posting (http://extjs.com/forum/showthread.php?t=2141)


You need autoScroll:true on the Region, and fitToFrame:false on the ContentPanel

I'll see if changing those attributes fixes the problem! But I gotta admit that I've come out of this thread more confused than when I started. Each post seems to say something different than the one before ;) In any case I do appreciate the help, all... hopefully I can track this down.

jack.slocum
19 Apr 2007, 1:06 AM
Each post seems to say something different than the one before

I didn't reply in that other thread, sorry. Personally, I would like to remove the autoScroll option for a region as I think it causes more confusion than anything. I always use fitToFrame and autoScroll on the panels since the autoScroll option was added to panels. It performs more consistent and allows a different scroll position for each tab.

Animal
19 Apr 2007, 1:12 AM
Ahah! I'll have to change my code.

jack.slocum
19 Apr 2007, 1:41 AM
Don't worry Animal, I won't be removing it. Too many people are using it.

Animal
19 Apr 2007, 8:24 AM
I just changed my Region to be autoScroll:false, and the ContentPanel I put inside it to be

fitToFrame:true,
autoScroll:true

And the ContentPanel's content is too tall for the Region but I don't get a scrollbar.

I think I still need the Region to be autoScroll:true, and the ContentPanel to be sized naturally so that it overflows the Region.

Animal
19 Apr 2007, 11:00 AM
Scratch that, I got confused.

I'm putting a BorderLayout inside a ContentPanel so that I can get a Toolbar to stay anchored at the bottom of the panel, and it was the ContentPanel in the "north" region of the inner layout that needed to be autoScroll:true.

Now I'm switching from that scheme to trying to use the toolbar config option of ContentPanel. That's the best way of having an anchored Toolbar in a panel isn't it?

I'm having a few probs, but I'm probably using it wrong. I'll ask for help tomorrow morning if I can't fix it.

mccann
26 Apr 2007, 12:49 PM
If you are not using tabs, you can still set position relative on the element (your normal element, not a generated one) if your element is the one handling scrolling (via configs above).

This also fixes the problem of creating a dynamic form in a scrollable BasicDialog. I found that the form fields would not scroll with the BasicDialog's content in IE7. I was using the following code to fix the problem:

myForm.render(formSlotEl);
Ext.select('.x-form-element').setStyle('position', 'static');

However, using your solution ended being much cleaner and efficient by setting the BasicDialog's body element to "position: relative"