Jump to content
  • Advertisement
Sign in to follow this  
idontlikedoom

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

This topic is 2571 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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="#660066"]PageLanguage[color="#666600"]=[color="#008800"]"C#"[color="#660066"]AutoEventWireup[color="#666600"]=[color="#008800"]"true"[color="#660066"]CodeBehind[color="#666600"]=[color="#008800"]"WebForm1.aspx.cs"[color="#660066"]Inherits[color="#666600"]=[color="#008800"]"WebApplication1.WebForm1" %>

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

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




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

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


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="#000088"]<html [color="#660066"]xmlns[color="#666600"]=[color="#008800"]"http://www.w3.org/1999/xhtml"[color="#000088"]>
[color="#000088"]<head>
[color="#000088"]<title></title>
[color="#000088"]</head>
[color="#000088"]<body>
[color="#000088"]<div>
bla bla bla
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<br [color="#000088"]/>
[color="#000088"]<iframe [color="#660066"]src[color="#666600"]=[color="#008800"]"WebForm1.aspx" [color="#660066"]style[color="#666600"]=[color="#008800"]"[color="#000088"]height[color="#666600"]: [color="#006666"]1263px[color="#666600"]; [color="#000088"]width[color="#666600"]: [color="#006666"]1254px[color="#008800"]"[color="#000088"]></iframe>
[color="#000088"]</div>

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


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
Advertisement
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

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.


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
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:

<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>


with bt1_Click being such:

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


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 of course 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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!