This is a migrated thread and some comments may be shown as answers.
Broken layout after moving the combobox in DOM
1 Answer 4 Views
This is a migrated thread and some comments may be shown as answers.
JP
Top achievements
Rank 1
JP asked on 23 Aug 2013, 08:32 AM
Hi,

I added a RadComboBox to my page and move it client-side to another location in the DOM. 
But somehow the layout gets broken.
I use jQuery to move it:
$(this._comboBox.get_element()).appendTo($("<div>").appendTo(this._containerElement));

The page doesn't do any postbacks, so moving it in the DOM wouldn't be a problem.

I attached a screenshot of the broken layout. Is there any way to fix the layout?

Thanks!

1 Answer, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 27 Aug 2013, 11:30 AM
Hi JP,

If the combo is moved correctly the layout shouldn't be broken. Be sure that you append the main combo's div element. For example:
<script type="text/javascript">
    function MoveCombo1() {
        $('#RadComboBox1').appendTo($('#target'));
    }
 
    function MoveCombo2() {
        $('#RadComboBox2').appendTo($('#target'));
    }
</script>
<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
    </Items>
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
    </Items>
</telerik:RadComboBox>
<p>
    <input type="button" onclick="MoveCombo1()" value="Move First Combo" />
    <input type="button" onclick="MoveCombo2()" value="Move Second Combo" />
</p>
<div id="target" style="background-color: aqua; width: 500px; height: 500px;"></div>

Regards,
Hristo Valyavicharski
Telerik
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 the blog feed now.
Asked by
JP
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Share this question
or