[Solved] Expanding below other controls

[Simon]

Hey Guys,

I have a couple of RCBs and when they expand, they do not appear below the box, rather below whatever control is under the box.
Sometimes even 2 controls under the box.  Can't seem to figure out what is causing it.  
I've tried setting EnableScreenBoundaryDetection to false, and Expand Direction to Up/Down.  Setting it to Up changes the position, but I do not want to use Up, I need Down.

See it in action here http://cgp.triplestones.com.au/text.aspx

Any ideas? Code below.

<%@ Page Title="" Language="C#" MasterPageFile="~/shared/templates/CGPTest.master" AutoEventWireup="true" CodeFile="text.aspx.cs" Inherits="design_text" %>

<asp:Content ID="Content3" ContentPlaceHolderID="cpPageBody" Runat="Server">
    <telerik:RadWindowManager ID="rwmCustom" runat="server"></telerik:RadWindowManager>
    <telerik:RadFormDecorator ID="rfdCustom" runat="server" DecoratedControls="All" EnableRoundedCorners="true" />

    <h2>Step 2 : Your order details</h2>
    <fieldset>
        <ul>
            <li>Pick type</li>
            <li><telerik:RadComboBox ID="rcbPickType" runat="server" Width="250px" OnSelectedIndexChanged="rcbPickType_SelectedIndexChanged" AutoPostBack="true" EnableScreenBoundaryDetection="false" ExpandDirection="Down" /></li>
            <li>Pick gauge</li>
            <li><telerik:RadComboBox ID="rcbGauge" runat="server" Width="60px" EnableScreenBoundaryDetection="false" ExpandDirection="Down" /></li>
            <li>Your Name</li>
            <li><asp:TextBox ID="tbName" runat="server" MaxLength="255" width="250px" /></li>
            <li>Your Email</li>
            <li><asp:TextBox ID="tbEmail" runat="server" MaxLength="255" width="250px" /></li>
            <li>Extra instructions</li>
            <li><asp:TextBox ID="tbExtraInfo" runat="server" TextMode="MultiLine" Rows="4" MaxLength="2500" width="250px" /></li>
            <li> </li>
        </ul>
    </fieldset>

</asp:Content>

protected void Page_Load(object sender, EventArgs e)
{
    // Catch a null order and redirect to the start page
    CustomOrder currentOrder = CustomOrder.GetCurrentOrder();
    if (currentOrder == null) currentOrder = new CustomOrder(DesignTypes.Text);

    if (!Page.IsPostBack)
    {
        // Bind PickTypes
        IEnumerable<XElement> pickTypes = CGP.ShoppingCart.Catalog.GetPickTypes(currentOrder.DesignType);
        foreach (XElement pickType in pickTypes)
        {
            RadComboBoxItem item = new RadComboBoxItem(pickType.Attribute("name").Value + " - " + pickType.Attribute("colour").Value, pickType.Attribute("name").Value + " - " + pickType.Attribute("colour").Value);
            item.ImageUrl = pickType.Attribute("imageThumbURL").Value;
            rcbPickType.Items.Add(item);
        }

        // Bind gauges
        BindGauges();
    }
}

protected void BindGauges()
{
    // Set gauge items in drop down
    rcbGauge.Items.Clear();

    IEnumerable<XElement> gauges = CGP.ShoppingCart.Catalog.GetGaugesByPickType((rcbPickType.SelectedValue.Split('-')[0]).Trim());
    foreach (XElement gauge in gauges)
    {
        rcbGauge.Items.Add(new Telerik.Web.UI.RadComboBoxItem(gauge.Attribute("name").Value));
    }

}

protected void rcbPickType_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
    BindGauges();
}

Thanks

[Hristo Valyavicharski]

Hi Simon,

While inspecting your page at: http://cgp.triplestones.com.au/text.aspx I noticed that this issue could be resolved by adding:  

padding : 1px;

to this div element. For example you could  set id of this div put the following in your site.css file:

<div id="test">.......</div>

#test {
    padding: 1px;
}

All the best,
Hristo Valyavicharski
the Telerik team

[Simon]

Thanks,

This fixed it for me.  The div code that needed styling was one of the auto-generated ones tied up in the script manager type code, so I could not edit the ID of the div itself, but I was able to apply a global div style that required minimal patching up elsewhere.