Why does decorated RadComboBox become unnested?

6 posts, 1 answers
  1. Chris Marisic
    Chris Marisic avatar
    30 posts
    Member since:
    Sep 2009

    Posted 25 Sep 2009 Link to this post

    I have a RadComboBox that exists in a P tag with a Label tag next to it.

    When the page renders out instead of having

    P
        Label
        RadComboBox
    /P

    I get

    P
       Label
    /P
    Div
        RadComboBox
    /Div

    This is making layout incredibly difficult since my P tags are positioning everything on my page.
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 26 Sep 2009 Link to this post

    Hi Chris Marisic,

    I was unable to reproduce this behavior.

    The rendering of the highlighted portion in the following page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ComboDivExitsP.aspx.cs" Inherits="Simple" %> 
     
    <%@ Register Assembly="Telerik.Web.UI.ComboBox" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!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
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <p> 
            <label id="label1" title="label"
            </label> 
            <telerik:RadComboBox ID="RadComboBox1" runat="server"
            </telerik:RadComboBox> 
        </p> 
        </form> 
    </body> 
    </html> 

    was

    <p> 
            <label id="label1" title="label"
            </label> 
            <div id="RadComboBox1" class="RadComboBox RadComboBox_Default " style="width:160px;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;"
        <table cellpadding="0" cellspacing="0" summary="combobox" border="0" style="border-width:0;table-layout:fixed;border-collapse:collapse;width:100%"
            <tr class="rcbReadOnly"
                <td class="rcbInputCell rcbInputCellLeft" style="margin-top:-1px;margin-bottom:-1px;width:100%;"><input class="rcbInput" type="text" id="RadComboBox1_Input" name="RadComboBox1" value="" style="display: block;" readonly="readonly"></input></td><td class="rcbArrowCell rcbArrowCellRight" style="margin-top:-1px;margin-bottom:-1px;"><id="RadComboBox1_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td
            </tr> 
        </table><!-- 2009.2.827.0 --><div class="rcbSlide" style="z-index:6000;"><div id="RadComboBox1_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="float:left;display:none;"><div class="rcbScroll rcbWidth" style="width:100%;"></div></div></div><input id="RadComboBox1_ClientState" name="RadComboBox1_ClientState" type="hidden" /> 
    </div> 
        </p> 
     

    Am I missing something?

    All the best,
    Simon
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris Marisic
    Chris Marisic avatar
    30 posts
    Member since:
    Sep 2009

    Posted 28 Sep 2009 Link to this post

    Place a RadFormDecorator with styled controls = All on the page and the mark up from Firebug will show the nesting order changed with the div moving up a level.
  5. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 29 Sep 2009 Link to this post

    Hi Chris Marisic,

    Thank you for getting back to me.

    I further investigated the issue with and without a RadFormDecorator on the page.

    In both cases with the following page:

    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <p> 
            <telerik:RadComboBox ID="RadComboBox1" runat="server"
            </telerik:RadComboBox> 
        </p> 
        <style="border: 1px solid green"
            <div style="border: 1px solid red"
                div</div> 
        </p> 
        </form> 
    </body> 

    this is what I observed in FireFox and FireBug:
    1. FireFox renders the <div>s (including that of the RadComboBox) outside of their containing <p> element.
    2. FireBug shows the same thing.
    3. The source code of the page however shows the <div>s inside the <p> element.

    Having in mind that a <div> element put inside a <p> element is an invalid HTML, the conclusion is that FireFox 'fixes' this inconsistency by rendering the HTML properly.

    In order to avoid this, I suggest you replace the <p> container with a <div> element. If you put some top/bottom margins of the latter you can achieve a similar to the <p> rendering look.

    Please let me know if you have any additional questions.

    All the best,
    Simon
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Chris Marisic
    Chris Marisic avatar
    30 posts
    Member since:
    Sep 2009

    Posted 29 Sep 2009 Link to this post

    This would definitely explain my confusion as to what was going on, I appreciate the time you took to solve this mystery!
  7. Chris Marisic
    Chris Marisic avatar
    30 posts
    Member since:
    Sep 2009

    Posted 29 Sep 2009 Link to this post


    I changed my markup to use <div>s instead of <p>s and now it all flows smoothly. 

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017