Content getting clipped in Firefox when Sliders are displayed

Hi,

I have a 2 column layout with a left nav and main content area implemented using a table. I have sliders in the left nav and the left nav is of a greater height than the main content area. When the sliders are dynamicallly displayed during page load, it causes the left nav to be expanded vertically. In Firefox, this expansion causes content at the bottom of the left nav to get clipped rather than the cell expanding to accommodate the new content.

I have implemented the same layout in CSS with the same result. The below example reproduces this problem although I have to press Ctrl + F5 in Firefox to get it to exhibit the problem with this example...in my real application it occurs when the page is opened.

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

<%@dotnet.itags.org.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="AtlasControlToolkit" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/>

<tablewidth="100%"cellpadding="0"cellspacing="0">

<tr>

<tdnowrap="nowrap"bgcolor="#f4f4f4"valign="top">

<asp:PanelID="_hidePanel"runat="server"Width="250">

<asp:LabelID="_sliderValueLabel"runat="server"></asp:Label>

<asp:TextBoxID="_sliderTextBox"runat="server"Style="display: none;"></asp:TextBox>

<AtlasControlToolkit:SliderExtenderID="_slider"runat="server">

<AtlasControlToolkit:SliderPropertiesMinimum="1"Maximum="10"Steps="10"TargetControlID="_sliderTextBox"

Length="218">

</AtlasControlToolkit:SliderProperties>

</AtlasControlToolkit:SliderExtender>

<br/>

This text vanishes!!

</asp:Panel>

</td>

<tdwidth="99%"valign="top">

<atlas:UpdatePanelID="_hideUpdatePanel"runat="server">

<ContentTemplate>

<asp:LinkButtonID="_hideLink"runat="server"Text="Hide Panel"></asp:LinkButton>

<AtlasControlToolkit:CollapsiblePanelExtenderID="_hideCollapsiblePanel"runat="server">

<AtlasControlToolkit:CollapsiblePanelPropertiesTargetControlID="_hidePanel"ExpandControlID="_hideLink"

CollapseControlID="_hideLink"CollapsedText="Show Panel"ExpandDirection="Horizontal"

SuppressPostBack="true">

</AtlasControlToolkit:CollapsiblePanelProperties>

</AtlasControlToolkit:CollapsiblePanelExtender>

</ContentTemplate>

</atlas:UpdatePanel>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Cheers,

Jason

Thanks for the repro. I've created work item 3450 to track this.

It seems that it might be a combination of the CollapsiblePanel and the Sliders that are causing this problem. The CollpasiblePanel creates a parent div to hold the content and gets the dimensions during intialisation. I am guessing that this might be happening before the sliders have initialised so that the dimensions of the wrapper div are not correct.

I noticed that when the ScrollContents attribute is set to false, the wrapper div overflow style is set to hidden in CollapsiblePanelBehaviour.js at line 456. When I change this to visible then the content is no longer clipped but the background colour of the containing table cell (see forum thread for repro) does not expand down with the expanded div content. I am not sure why the overflow is being set to hidden as I would have thought that all of the content in the panel that is being wrapped should always be visible.

This problem is still occuring in FF 2.0 although works OK in IE7.

OK...the hack of setting the overflow to visible doesn't work correctly as some of the overflowed content then overlaps with the content below instead of expanding the table cell as hoped. I removed the CollapsiblePanel, hiding the container on the server side instead, and the problem goes away so it is definitely related to the CollapsiblePanel.

constrain reorder list drag area like Netflix

Is there a way to make the reorder list constrain the drag item to a column - like Netflix now does on the movie que ?

On the netflix site, when you drag a movie in the que to reorder it, the movie can only go up and down in the list ( you cant drag it all over the page like you can with the Ajax Reorder List...

Thanks for any help

bump anyone ?

Hi Uncleb,

I'm failed to logon the Netflix to get the effect due to the account issue.Based on your description,my understanding of what you want is that you want move a row from a list to another list. Just like move a row from a RecorderList to another.If I have miunderstood, please let me know.

Based on this knowledge, I'm afraid that we cannot achieve it by using RecorderList directly since it is difficult to drag an item across to another RecorderList.However, here is the information maybe you are looking for: http://www.isocra.com/articles/table_dnd.php .

I hope this helps.

Best Regards,

Jonathan

thanks Jonathan. The netflix control is a reorder style list that works almost the same way as ajax control, with a few differences.

The main difference is that when you drag an item, it can only go up or down in the list ( physically) The ajax reorder list allows the dragged item to be moved anywhere on the page ( though if it's not released on top of the reorder list , it does nothing)

Hard to explain without seeing it.

it similar to this...

http://demo.script.aculo.us/ajax/sortable_elements

Hi Uncleb,

Based on my research, I'm afraid we cannot find out a easy way to achieve your target except modify the source code. RecorderList is more complex than the most other controls in Ajax Control Toolkit. Fortunately, we can dip into the control since it is open source project. If you have any new finding , sharing them will be greatly appreciated.Thanks.

Best Regards,

Jonathan

Composite control with updatepanel for drag and drop

I'm trying to create a composite control with an updatepanel on it that contains an area with dropzones and draggables.

I have created the following controls:

- DragDropUpdatePanel (the control with the UpdatePanel on it)

- UpdatePanelTemplate (the contenttemplate for the updatepanel)
- contains a placeholder for the dropzones and a linkbutton to force an update

- Dropzone that implements IScriptControl

- Draggable that implements IScriptControl

- Loader, an example from another thread to update the updatepanel after a postback.

The DragDropUpdatePanel will create all dropzones and draggables in the DataBind function. This all works ok until i drop a draggable on a dropzone.
Ondrop is performing the click event of the linkbutton that will execute the DataBind method and refreshes the Updatepanel.

The result looks ok but the dropzone is always disposed and i get an and error when i try to move a draggable item.

I have created a demo that you candownload here.

Hopefully someone can explain to me what I am doing wrong.

Thanks Willem.

struggeling with it but still no result ... could someone help me out here?

thanks

got it fixed .. .. wrote an extender for the dropzone and based myself on the dropwatcherbehavior.js file from the ReorderList control in the atlascontrol toolkit.