[Solved] radcombobox dropdown detaches significantly

[Alex]

I added a radcombobox to my page and set up a datasource of linqtosql.  When I ran it and clicked on the combobox, the dropdown appeared significantly below the combobox.  See the attached screen print.  Here is the markup excerpt from my aspx page :

<td>
    <telerik:RadComboBox ID="rcbExamLocation" Runat="server"
        DataSourceID="LinqDataSource1" DataTextField="LocCity"
        DataValueField="LocationID" Width="250px" Skin="WebBlue" OffsetY="0" ExpandAnimation-Type="Linear" ExpandAnimation-Duration="150">
    </telerik:RadComboBox>
    <asp:LinqDataSource ID="LinqDataSource1" runat="server"
        ContextTypeName="SPPExamRegistrationAlphaDataContext"
        OrderBy="LocCity, LocAddress"
        Select="new (LocCity, LocAddress, LocCounty, LocationID)"
        TableName="viewExamLocations">
    </asp:LinqDataSource>
</td>

I have discovered I can adjust this with the OffsetX and Y properties but what is wrong that caused this in the first place?  Surely this isn't the normal position for the control is it?

I am running VS 2008 SP1 on Windows XP SP3 with the 2009.2.826 version of RadControls for ASP.NET AJAX.  Does anybody have a solution other than modifying the OffsetX and Y properties until the dropdown moves back up vicinity of the combobox?

Thanks,
Alex

[Simon]

Hello Alex,

Please verify if there is a container of the RadComboBox with position relative or absolute. There was an issue where the drop down was displaced when the control was in such containers. We fixed the issue with Q1 2010 SP2 so you may want to upgrade if this is an option for you.

Sincerely yours,
Simon
the Telerik team

[Alex]

Simon,
Thanks for your response.  The RadComboBox is within a cell of a table.  I checked the Format-Position setting of the control and the Positioning Sytle is set to None.  I have searched the entire page and the masterpage and cannot find any container that has the Position set to relative or absolute.   Would you have any other ideas?

Alex     

 

[Cori]

Hello Alex,

Do you have any styles the would be applied to the RadComboBox's drop-down area. The RadComboBox's drop-down area is a div, so you may want to check if you have any global styles that would be affecting it. You can also trying inspecting the HTML using the IE Developer Toolbar to see what's going on.

I hope that helps.

[Alex]

Thanks for reponding Cori.  I have gone through all the markup and examined the StyleSheets that are used but did not see any attribute or property that I thought might explain/cause the problem.  Using the IE Developer Tools as you suggested, I found the following but I am not sure what some of the syntax is saying: 

<div id="ctl00_MainContentPlaceHolder_rcbExamLocation" class="RadComboBox RadComboBox_WebBlue " style="width:250px;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="ctl00_MainContentPlaceHolder_rcbExamLocation_Input" name="ctl00$MainContentPlaceHolder$rcbExamLocation" value="Charlotte                     " style="display: block;" readonly="readonly"></input></td><td class="rcbArrowCell rcbArrowCellRight" style="margin-top:-1px;margin-bottom:-1px;"><a id="ctl00_MainContentPlaceHolder_rcbExamLocation_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
                    </tr>
                </table><div class="rcbSlide" style="z-index:6000;"><div id="ctl00_MainContentPlaceHolder_rcbExamLocation_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_WebBlue " style="float:left;display:none;"><div class="rcbScroll rcbWidth" style="width:100%;"><ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;"><li class="rcbItem ">Charlotte                     </li><li class="rcbItem ">Manteo                        </li><li class="rcbItem ">Raleigh                       </li><li class="rcbItem ">Wilmington                    </li></ul></div></div></div><input id="ctl00_MainContentPlaceHolder_rcbExamLocation_ClientState" name="ctl00_MainContentPlaceHolder_rcbExamLocation_ClientState" type="hidden" />
            </div>

When I have compared this with the styles in the Master Page I don't see any correlation. Some of the 'style' settings I have no idea where they are coming from.  I have tried just dragging and dropping a couple of more radcomboboxes on to the page, without modifying any properties, with the same result.  If I add a standard DropDownList control on to the page then it functions as it is supposed to.  If I don't get any resolution then I will just have to replace the radcombobox with the dropdownlist control.  If you can provide any further assistance it would be greatly appreciated.

Thanks,
Alex

[Yana]

Hi Alex,

Can you send is a live url where we can observe this issue? Thanks in advance

Greetings,
Yana
the Telerik team