interesting issue with updatepanel and absolutely positioned div

Hi,

Earlier this evening, I ran into an interesting problem. To be honest, I'm not sure if it is purely ATLAS related or not, but when I removed the UpdatePanel around that section of code, it worked. The basic description is that when I moused over textboxes in my gridview, I could only select them when my mouse pointer was directly over the very top edge of the textbox. This happened where ever an absolutely positioned div with no content was covering it (the div style was position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0;). Text and radio buttons in the same area were unaffected, as was a multi-line textbox.

Here's the detailed description:

On part of my page, I have a gridview and save button in an UpdatePanel (this is because the top of the page is a search form for populating the gridview and resulting form). Because the gridview is a form to be filled out, I have textboxes directly in the item templates for some of the columns. I also have a radiobuttonlist in each column, and a couple of plain old bound text columns. In that same UpdatePanel, I have another UpdatePanel for displaying some information and prompting the user to confirm or cancel the save. Largely for styling control, I decided to implement this confirm dialog as a div in an update panel. Wrapped around the outside of this UpdatePanel is an absolutely positioned div. The idea is that I can then style the confirm dialog in such a way that I can have a transparent .gif as the background image. This way, the user can see the data underneath the confirm dialog, but is unable to click on any of it -he/she must click one of the confirm dialog buttons.

Here's the basic code:

<atlas:UpdatePanel ID="up1" runat="server" RenderMode="inline">
<Triggers>
...
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server">

<div style='position:absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0;'>
<atlas:UpdatePanel ID="upConfirm" runat="server" Mode="Conditional" RenderMode="inline">
<Triggers>
...
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlConfirm" runat="server" Visible="false">
<div style='width: 100%; height: 2000px; background: url(images/transparent.gif);'>
<div style='position: absolute; top:10%; left: 25%; padding: 10px; border: solid 3px green; background-color: #fff;'>
<p>
...
</p>
<p>
<asp:Button ID="btnConfirm" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</p>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</atlas:UpdatePanel>
</div>
gridview and other stuff is below but within up1
...

It worked beautifully other than the problem described at the top. I eventually fixed it by removing the height style on the div wrapping the confirm dialog's UpdatePanel. I luckily stumbled upon the solution when the gridview got filled with enough data to force a page scroll, and I noticed that the textboxes below the absolutely positioned div (height: 100%) worked normally. Because a div inside the UpdatePanel had the transparent background image, width, and height set, the page still functioned as intended.

My question is: has anyone else run into this? What causes textboxes to be only selectable by what appears to be the top pixel? Also, I should mention that if there was text in the textbox, the textbox was selectable as normal where ever there was text. So if the left half of the textbox contained text and the right half didn't, the left half was selectable normally, but when mousing over the right half, I could only select the textbox by clicking on its top border.

If need be, I can try to come up with some code to replicate it. It will take some doing, though, because everything is domain level objects in the code behind populating the gridview, etc.

Chris

Forgot to mention that this occurred in IE7. Not sure about IE6 or Firefox.

Hello All,

I am facing problem regarding Atlas.
I have install the AtlasSetup.msi in my .NET framework 2.0, and i open the new Atlas Website.....
Let me first explain the my senario,

I have data grid(5 colunm datagrid) on my Page. It's First Colunm is LinkButton whose text property contain the ID. As i click on the this LinkButton, the Data against ID (Linkbutton.Text) are move to the textboxes, so that u can edit the Values and click on Update Button to update the data in datagrid.

So i use atlas and put the datagrid and textBox in UpdatePanel
I wrote the trigger also as below
<Triggers>
<atlas:ControlEventTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>

but i found "Unknown error" alert box , as i click on Update Button.
Please Suggest me.... the reason behind this Error, Please Suggest me how to rectify this error.

I search in Atlas forum and Come to Known that if u have any special chararter in title like <title>Ajax & Page</title>
then u got this alert error message.
Or
if the session got expire, then also this error encounter.
in my case ... title is correct as well as my application session are also working perfectly.

Please, give me the suggest to come out from this problem.

with regards
Tarun Sinha

Here's another twist: in IE6, dropdownlists appear to be immune from the transparent gif. They show above it and are selectable. I even put a solid colored gif to be sure, and the only thing that appears above the gif are the dropdownlists! Anyone know why?

CSS styling (including z-index) doesn't seem to have an effect. I had to move them into an UpdatePanel and disable/enable them based on what was going on in the page. Textboxes, radiobuttonlists, gridviews, buttons, labels, and literals all end up under the image.

Of course, I just today read about the Modal Popup control, but for my purposes here, keeping everything on the server-side and being able to completely control what's in my "popup" (including buttons) would be easier, especially at this point.

Invoking postback for an update panel in a parent document

The default page for my website contains a div with links to user data that is only visible when a user is logged into my site. The login control lives in an IFrame within the default page (see sample code below).

Now, how can I get the udpate panel on the default page to recognize an event or a button click inside of the login control? I'm not looking for a tutorial on getting the login control to work, but rather any link button inside of the IFrame's update panel forcing the default page's update panel to post back. Both pages have a script manager.

chopped down version of existing code:

dafault page:

1<asp:update panel id="upUserPrefs" runat="server" updatemode="conditional">2 <contenttemplate>3 <div id="userPrefs" runat="server"><a href="prefs.aspx">preferences</a></div>4 </contenttemplate>5</asp:update panel>

IFrame source page:

1 <asp:UpdatePanel ID="updateSignon" runat="server" UpdateMode="conditional">2 <ContentTemplate>3 <asp:Table ID="tblLoginCtrl" runat="server" visible="false" Width="100%" HorizontalAlign="Left" CellPadding="0" CellSpacing="0">4 <asp:TableRow>5 <asp:TableCell ID="tcLoginCtrl">6 <uc1:LoginControl ID="LoginControl" Enable runat=server LoginStyle=Login_Home />7 </asp:TableCell>8 </asp:TableRow>9 </asp:Table>10 </ContentTemplate>11 </asp:UpdatePanel>Any help would be greatly appreciated.

</p><p> (this.Parent.Parent as UpdatePanel).Update();</p><p>

is what I use.....however i have other problems...LOL. but that should fix yours.

Hi,

I think you can add a invisible button in the default page, set it as a trigger for the update panel.

Then add a javascript function in the contained page, in which invoke the click event of the button in the container.

Please feel free to let me know if there is any problem.

I tried that before, but when I have 2 instances of the same control on my page, it fires events for both of them. Or did I do something wrong?? Should this be happening? Have you ever heard of this??

In my opinion, it's normal that two control of the same type would behavior the same.

Is ASP AJAX overkill for this, or just what I need?

Having to build a simple discussion forum for a site and don't want additional "create_post" pages in my site map. I thought about using a modal div to put up the "create_post" page and on post, close the modal div. WOuld it be overkill to use ASP AJAX for this, or is this a perfect fit?

Scenario: you are on the forum topic page and there is a Creat Post or New Post button. On click, launch modal div with the subject and message boxes along with a button. ON this button click, post message to database and close modal.

I was leaning towards modal over the traditional new window popup to avoid the "lost window" and "popup blocker" situations.

Thanks!

I think it's absolutly perfect for what you're looking to do. Check out MS-Ajax's Modal popup extender.

Great! Problem is I am new to this ajax kit and read the getting started and all the demos start with ASP.net Atlas Project which is already nicely configured. For a site project that already exists, this is the only instructions I found:

"You can add ASP.NET AJAX components to an existing site by modifying the Web.config file in your Web application with the configuration values from the sample Web.config file in the installation path."

Did that...now do I need to do the typical Add Reference to get at the controls?

Because the assembly is installed in the GAC, you shouldn't have to add a reference. As long as the new values are in the web.config, it should be fine. I tested it by taking an old (pre-atlas) site and adding the new web.config values into it. ScriptManager, UpdatePanel and Timer all worked without any other change.

Guess what I meant to say was the Controls like ModalPopup are not in the gui and when added to html side, not recognized.

If you haven't already, you'll need to download the Ajax Control Toolkit (in addition to Ajax Beta 2). I was able to add ModalPopup to my site by creating a Bin folder and adding AjaxControlToolkit.dll to it. Then I added this to my page:

<%

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

After that, my page recognized code such as:

<

ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"TargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"/>"AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>"AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Bingo! that is what I was missing!! Thanks!

Did a cut and paste of the modal popup example and it fires. ( :) ) but doenst act "modal" I can still interact with the background. Is the source available for the online modal example?