Broken layout after moving the combobox in DOM

[JP]

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!

[Hristo Valyavicharski]

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