Chris Marisic
Top achievements
Rank 1
Rank 1
Chris Marisic
asked on 25 Sep 2009, 02:05 PM
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.
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.
5 Answers, 1 is accepted
0
Hi Chris Marisic,
was
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.
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> |
| <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;"><a 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> |
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.
0
Chris Marisic
Top achievements
Rank 1
Rank 1
answered on 28 Sep 2009, 12:14 PM
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.
0
Accepted
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> |
| <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:
- FireFox renders the <div>s (including that of the RadComboBox) outside of their containing <p> element.
- FireBug shows the same thing.
- 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.
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.
0
Chris Marisic
Top achievements
Rank 1
Rank 1
answered on 29 Sep 2009, 02:27 PM
This would definitely explain my confusion as to what was going on, I appreciate the time you took to solve this mystery!
0
Chris Marisic
Top achievements
Rank 1
Rank 1
answered on 29 Sep 2009, 04:38 PM
| I changed my markup to use <div>s instead of <p>s and now it all flows smoothly. |