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.