This is a migrated thread and some comments may be shown as answers.

Problem with a Combo of IE/FormDecorator/Splitter

2 Answers 95 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

SomeName asked on 22 Jul 2011, 09:17 AM

Hi.

As mentioned in the title i have a problem with a combination of the 3 - Internet Explorer (tested with 8 and 9), FormDecorator and Splitter.
Its hard to explain, so i hope you guys will test it. But i give my best...

In my sample Page i have a RadSplitter with 2 panes. RadSplitter is in 100% height mode. So the necessary stlying for Html, Body, Form is applied. As well as all the settings needed for RadSplitter i have found at this page: (Without the Margin/Offset Stuff)
http://www.telerik.com/support/kb/aspnet-ajax/splitter/radsplitter-which-is-100-of-the-page-and-has-margin-applied.aspx

In the Bottom Pane i am loading several DropDownLists with the styling applied from FormDecorator.
You will notice that the DropDownLists have a rather large width for the amount kind of Data they have, thats because i wanted them to be placed under each other. So that a scrollbar appears in the bottom pane, this scrollbar is very important to this problem, so when you are testing this application resize your browser window so that you have a scrollbar.

Now that you have this test page running, and you can see it. Do some scrolling with the scrollbar... Then try to open a dropdownlist, the second you click on the dropdownlist the position jumps to the very bottom of the page. So that you arent able to see the dropdownlist at all, its like the html container suddendly got a padding of the amount you have scroll down the page and you can now see the very bottom of the html container that is blank...

So... I dont really believe you have understood the problem (as long as you havent tested it yourself), so i hope some screenshots will help:
1.) http://s1.directupload.net/file/d/2593/77pu5nm7_jpg.htm

2.) http://s7.directupload.net/file/d/2593/8srp3r5g_jpg.htm

3.) http://s1.directupload.net/file/d/2593/kjtwzdmy_jpg.htm

Hope you understood the problem and can help me fix it. I cannot use RadComboBox because it renders to slow for the amount i have in my application, so i am hoping for a fix that works with this combination Internet Explorer, FormDecorator and DropDownList.

Here is the TestPage:
Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>

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

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

<head runat="server">

<title></title>

<style type="text/css">

html, body, form

{

height: 100%;

overflow: hidden;

padding: 0%;

margin: 0%;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="ScriptManager" runat="server">

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator45" runat="server" EnableRoundedCorners="false" DecoratedControls="Select" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Hay">

</telerik:RadSkinManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"

Orientation="Horizontal">

<telerik:RadPane ID="RadPane1" runat="server">

Head Stuff...

</telerik:RadPane>

<telerik:RadPane ID="RadPane2" runat="server" >

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

C# File

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using Telerik.Web.UI;

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

DataTable dtTest = new DataTable();

dtTest.Columns.Add("Value");

dtTest.Columns.Add("Text");

for (int i = 0; i < 20; i++)

{

DataRow dr = dtTest.NewRow();

dr["Value"] = i;

dr["Text"] = i;

dtTest.Rows.Add(dr);

}

for (int i = 0; i < 100; i++)

{

//RadComboBox ddlTest = new RadComboBox(); - Works fine..

DropDownList ddlTest = new DropDownList();

ddlTest.ID = Convert.ToString(i);

ddlTest.DataValueField = "Value";

ddlTest.DataTextField = "Text";

ddlTest.Style.Add("width", "500px");

ddlTest.DataSource = dtTest;

ddlTest.DataBind();

RadPane2.Controls.Add(ddlTest);

}

2 Answers, 1 is accepted

Accepted

answered on 26 Jul 2011, 12:08 PM

Hello,

Indeed I was able to reproduce the issue that you are experiencing. It is related to the RadFormDecorator and we will look into it and will do our best to fix it. Until then you can apply the following simple solution, which worked on my side:

Assign a CssClass name to the RadPane2. I used the name pane2Fix.
Remove the overflow css rule from the html, body, form declaration.
Set the pane2Fix class CSS position to relative

html, body, form

{

height: 100%;

padding: 0%;

margin: 0%;

}

.pane2Fix

{

position: relative;

}

Hope this will be of help.

Kind regards,
Niko
the Telerik team

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.