Problem with a Combo of IE/FormDecorator/Splitter

3 posts, 1 answers
  1. SomeName
    SomeName avatar
    19 posts
    Member since:
    Jul 2011

    Posted 22 Jul 2011 Link to this post


    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)

    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:



    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" "">
    <head runat="server">
        <style type="text/css">
            html, body, form
                height: 100%;
                overflow: hidden;
                padding: 0%;
                margin: 0%;
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server">
        <telerik:RadFormDecorator ID="RadFormDecorator45" runat="server" EnableRoundedCorners="false" DecoratedControls="Select" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Hay">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"
            <telerik:RadPane ID="RadPane1" runat="server">
                Head Stuff...
            <telerik:RadPane ID="RadPane2" runat="server" >

    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();
            for (int i = 0; i < 20; i++)
                DataRow dr = dtTest.NewRow();
                dr["Value"] = i;
                dr["Text"] = i;
            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;
  2. Answer
    Niko avatar
    404 posts

    Posted 26 Jul 2011 Link to this post


    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:
    1. Assign a CssClass name to the RadPane2. I used the name pane2Fix.
    2. Remove the overflow css rule from the html, body, form declaration.
    3. Set the pane2Fix class CSS position to relative
      html, body, form
      height: 100%;
      padding: 0%;
      margin: 0%;
          position: relative;

    Hope this will be of help.

    Kind regards,
    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.
  3. SomeName
    SomeName avatar
    19 posts
    Member since:
    Jul 2011

    Posted 08 Aug 2011 Link to this post

    Sry, for the late response. Works fine. Thanks alot.
Back to Top