Sign in to follow this  
idontlikedoom

[web] Firefox “jumps” when using UpdatePanel and SetFocus in an <iframe> (asp.net)

Recommended Posts

idontlikedoom    122
I have the problem that Firefox "jumps" (moves the scrollbar to the top) if I use an UpdatePanel together with the SetFocus function inside an iframe. I'll show this by posting the code:

First of all the HTML of the webform:



[color="#666600"]<%@[/color] [color="#660066"]PageLanguage[/color][color="#666600"]=[/color][color="#008800"]"C#"[/color][color="#660066"]AutoEventWireup[/color][color="#666600"]=[/color][color="#008800"]"true"[/color][color="#660066"]CodeBehind[/color][color="#666600"]=[/color][color="#008800"]"WebForm1.aspx.cs"[/color][color="#660066"]Inherits[/color][color="#666600"]=[/color][color="#008800"]"WebApplication1.WebForm1"[/color] %>

[color="#660066"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]

[color="#000088"]<html[/color] [color="#660066"]xmlns[/color][color="#666600"]=[/color][color="#008800"]"http://www.w3.org/1999/xhtml"[/color][color="#000088"]>[/color]
[color="#000088"]<head[/color] [color="#660066"]runat[/color][color="#666600"]=[/color][color="#008800"]"server"[/color][color="#000088"]>[/color]
[color="#000088"]<title></title>[/color]
[color="#000088"]</head>[/color]
[color="#000088"]<body>[/color]
[color="#000088"]<form[/color] [color="#660066"]id[/color][color="#666600"]=[/color][color="#008800"]"form1"[/color][color="#660066"]runat[/color][color="#666600"]=[/color][color="#008800"]"server"[/color][color="#000088"]>[/color]
[color="#000088"]<asp:ScriptManager[/color] [color="#660066"]ID[/color][color="#666600"]=[/color][color="#008800"]"ScriptManager1"[/color][color="#660066"]runat[/color][color="#666600"]=[/color][color="#008800"]"server"[/color][color="#000088"]>[/color]
[color="#000088"]</asp:ScriptManager>[/color]
[color="#000088"]<div>[/color]
[color="#000088"]<asp:UpdatePanel[/color] [color="#660066"]ID[/color][color="#666600"]=[/color][color="#008800"]"UpdatePanel1"[/color][color="#660066"]runat[/color][color="#666600"]=[/color][color="#008800"]"server"[/color][color="#000088"]>[/color]
[color="#000088"]<ContentTemplate>[/color]
[color="#000088"]<asp:DropDownList[/color][color="#660066"]ID[/color][color="#666600"]=[/color][color="#008800"]"DropDownList1"[/color][color="#660066"]runat[/color][color="#666600"]=[/color][color="#008800"]"server"[/color][color="#660066"]AutoPostBack[/color][color="#666600"]=[/color][color="#008800"]"True"[/color][color="#660066"]onselectedindexchanged[/color][color="#666600"]=[/color][color="#008800"]"[/color][color="#660066"]DropDownList1_SelectedIndexChanged[/color][color="#008800"]"[/color][color="#000088"]>[/color]
[color="#000088"]<asp:ListItem>[/color]1[color="#000088"]</asp:ListItem>[/color]
[color="#000088"]<asp:ListItem>[/color]2[color="#000088"]</asp:ListItem>[/color]
[color="#000088"]<asp:ListItem>[/color]3[color="#000088"]</asp:ListItem>[/color]
[color="#000088"]<asp:ListItem>[/color]4[color="#000088"]</asp:ListItem>[/color]
[color="#000088"]<asp:ListItem>[/color]5[color="#000088"]</asp:ListItem>[/color]
[color="#000088"]</asp:DropDownList>[/color]
[color="#000088"]<asp:Label[/color] [color="#660066"]ID[/color][color="#666600"]=[/color][color="#008800"]"Label1"[/color][color="#660066"]runat[/color][color="#666600"]=[/color][color="#008800"]"server"[/color][color="#660066"]Text[/color][color="#666600"]=[/color][color="#008800"]"Label"[/color][color="#000088"]></asp:Label>[/color]
[color="#000088"]</ContentTemplate>[/color]
[color="#000088"]</asp:UpdatePanel>[/color]
[color="#000088"]</div>[/color]
[color="#000088"]</form>[/color]
[color="#000088"]</body>[/color]
[color="#000088"]</html>[/color]




Now the codebehind to that form (it has no functions except an empty page_load and this one):

[color="#000088"]protected[/color] [color="#000088"]void[/color] [color="#660066"]DropDownList1_SelectedIndexChanged[/color][color="#666600"]([/color][color="#000088"]object[/color] sender[color="#666600"],[/color] [color="#660066"]EventArgs[/color] e[color="#666600"])[/color]
[color="#666600"]{[/color]
[color="#660066"]Label1[/color][color="#666600"].[/color][color="#660066"]Text[/color] [color="#666600"]=[/color] [color="#660066"]DropDownList1[/color][color="#666600"].[/color][color="#660066"]SelectedIndex[/color][color="#666600"].[/color][color="#660066"]ToString[/color][color="#666600"]();[/color]
[color="#660066"]SetFocus[/color][color="#666600"]([/color][color="#660066"]DropDownList1[/color][color="#666600"]);[/color]
[color="#666600"]}

[/color]
OK, this form is hosted inside a barebone HTML page using an iframe. Here is the HTML host page:



[color="#660066"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color="#000088"]<html[/color] [color="#660066"]xmlns[/color][color="#666600"]=[/color][color="#008800"]"http://www.w3.org/1999/xhtml"[/color][color="#000088"]>[/color]
[color="#000088"]<head>[/color]
[color="#000088"]<title></title>[/color]
[color="#000088"]</head>[/color]
[color="#000088"]<body>[/color]
[color="#000088"]<div>[/color]
bla bla bla
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<br[/color] [color="#000088"]/>[/color]
[color="#000088"]<iframe[/color] [color="#660066"]src[/color][color="#666600"]=[/color][color="#008800"]"WebForm1.aspx"[/color] [color="#660066"]style[/color][color="#666600"]=[/color][color="#008800"]"[/color][color="#000088"]height[/color][color="#666600"]:[/color] [color="#006666"]1263px[/color][color="#666600"];[/color] [color="#000088"]width[/color][color="#666600"]:[/color] [color="#006666"]1254px[/color][color="#008800"]"[/color][color="#000088"]></iframe>[/color]
[color="#000088"]</div>[/color]

[color="#000088"]</body>[/color]
[color="#000088"]</html>[/color]


I added the br elements because you need to have scroll bars to see the effect. Now if you scroll down in the host page and chose a value in the dropdownlist in the iframe in Internet Explorer, the Label gets updated without any problems and the dropdownlist gets the focus.

Now try the same in Firefox - everything works too, but you get the annoying effect that firefox scrolls the html host page to the top again!

I tried it with even bigger pages and multiple iframes, and it seems to scroll to the beginning of the one iframe in which you have chosen the value in the dropdownlist. Safari (and I guess Chrome) has the same behavior. Opera doesn't do this annoying "jump" (same with IE).

What is the problem here?

Share this post


Link to post
Share on other sites
landlocked    103
You're setting focus to DropDownList1 which is effectively at the top of your page because there are no elements between it and your opening <body> tag that separates the two.

Share this post


Link to post
Share on other sites
idontlikedoom    122
[quote name='landlocked' timestamp='1307471945' post='4820619']
You're setting focus to DropDownList1 which is effectively at the top of your page because there are no elements between it and your opening <body> tag that separates the two.
[/quote]

OK, but what is the solution? IE and Opera don't scroll, I want the same behavior in Firefox and Safari.

Tried MaintainScrollPositionOnPostback, doesn't work.

Anyone here with an advice?

Share this post


Link to post
Share on other sites
idontlikedoom    122
OK, after lots of searching I've found the solution:



[url="http://forums.asp.net/t/1622050.aspx/1/10"][color="#034efa"]http://forums.asp.net/t/1622050.aspx/1/10[/color][/url]



User "DotNetSeeker" had the right solution in that thread.

Share this post


Link to post
Share on other sites
landlocked    103
I don't get what the issue is. Firefox is my default browser and I just made a quick asp.net solution and added the following code:

[code]<asp:Button ID="bt1" runat="server" OnClick="bt1_Click" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<asp:TextBox ID="tb1" runat="server"></asp:TextBox>[/code]

with bt1_Click being such:

[code]protected void bt1_Click(object sender, EventArgs e)
{
tb1.Focus();
}[/code]

And as expected when I click on the button my page jumps down to the text box. My point with my response is that DropDownList1 is at the top of your rendered page in the browser so if you "jump" to it [i]of course[/i] your page is going to keep popping up to the top. It's working as it should.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this