Expanding below other controls

3 posts, 1 answers
  1. Simon
    Simon avatar
    26 posts
    Member since:
    Jul 2011

    Posted 30 Jan 2013 Link to this post

    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
  2. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 01 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Simon
    Simon avatar
    26 posts
    Member since:
    Jul 2011

    Posted 04 Feb 2013 Link to this post

    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.

Back to Top