ComboBox dropdown list not in place when scrolling with mouse

[rupraj51]

Hi,

I am having problem with dropdownlist of radcombobox not sticking to the combobox when i scroll the page using mouse. The radcombobox gets displayed in a modalpopup which is created using ajaxcontroltoolkit's modal popup extender. When the background page gets scrolled using mouse wheel the dropdown list also goes up and down along with the scroll

I know this is getting caused due to the css. Need some help fixing the css for the same

[Ivana]

Hi Rupesh,

Try the approach discussed at the following forum thread: http://www.telerik.com/community/forums/aspnet-ajax/combobox/radcombobox-autoresize-and-dropdown-position.aspx.

I hope it helps.

Regards,
Ivana
the Telerik team

[K10]

 

[K10]

 I am not getting that way to solve.will you please tell me exact way .

Thanks

[Princy]

Hi

Please have a look into the following code I tried to display a RadComboBox inside the Ajax ModalPopupExtender. Everything including the scrolling works fine at my end.

ASPX:

<asp:LinkButton ID="LinkButton1" runat="server" Text="Click To Show PopUp"></asp:LinkButton>
<ajax:ModalPopupExtender ID="ModalPopupExtender" runat="server" PopupControlID="popUpPanel"
    BackgroundCssClass="BackGround" TargetControlID="LinkButton1" CancelControlID="RadButton1">
</ajax:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server" CssClass="Pop">
    <div>
        <telerik:RadButton ID="RadButton1" runat="server" Width="44px" Height="45px" CssClass="RadButtonStyle">
            <Image ImageUrl="Images/Close.jpg" />
        </telerik:RadButton>
        <telerik:RadComboBox ID="RadComboBox1" runat="server" DataSourceID="SqlDataSource2"
            CssClass="RadComboBoxStyle" EmptyMessage="Enter Name" DataTextField="ContactName">
        </telerik:RadComboBox>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>
    </div>
</asp:Panel>

CSS:

<style type="text/css">
    .BackGround
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
        z-index: 100 !important;
    }
    .Pop
    {
        z-index: 1001 !important;
        background-color: White;
        width: 400px;
        height: 300px;
        border: 1px solid black;
        border-radius: 10px;
    }
    .RadComboBoxStyle
    {
        margin-left: 20px !important;
        margin-top: -20px !important;
    }
    .RadButtonStyle
    {
        margin-left: 352px !important;
        margin-top: 2px !important;
    }
</style>

Thanks,
Princy.

[K10]

Hey Princy, Thank you so much for your support.I tried this but its not working.
I have attached two images one is before and other one is after scrolling popup extender. will u  tell me what is going wrong in following code

  <tr>
                                <td width="100%" style="border: 1" align="center">
                                    <asp:HyperLink ID="TestHyperLink" runat="server" Style="display: none;"></asp:HyperLink>
                                    <ajaxtoolkit:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server" TargetControlID="TestHyperLink"
                                        PopupControlID="AddReminderPanel" CancelControlID="CancelCopyButton" BackgroundCssClass="modalBackground"
                                        BehaviorID="MPE" />
                                    <asp:Panel ID="AddReminderPanel" runat="server" Width="408px" Font-Names="@MS PGothic"
                                        Style="display: none" CssClass="Pop">
                                        <table width="100%">
                                            <tr>
                                                <td valign="bottom">
                                                    
                                                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="padding-left: 0px;
                                                        border: solid 1px Black; background-color: #e4e4e4;" width="100%" class="rounded-corners">
                                                        <tr>
                                                            <td align="left" width="100%" colspan="3" height="0">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center"   style="  color: White;" width="100%"
                                                                colspan="3">
                                                                <table align="left" border="0" cellpadding="0" cellspacing="0" style="padding-left: 0px;
                                                                    border: solid 0px Black; background-color: #396aaf;" width="100%" class="custom-corners">
                                                                    <tr>
                                                                        <td align="center">
                                                                            <asp:Label ID="Label10" runat="server" Text="Assign Web Link" CssClass="PopUpCss"></asp:Label>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center" width="2%">
                                                            </td>
                                                            <td align="center" width="96%" style="padding-left: 10px;">
                                                             
                                                                <table style="width: 100%; padding-left: 10px; padding-right: 10px;">
                                                                    <tr>
                                                                        <td colspan="2" align="center">
                                                                            <asp:Label ID="MessageLabel" runat="server" Text="" CssClass="label_errormessage"
                                                                                Visible="false"></asp:Label>
                                                                        </td>
                                                                    </tr>
                                                                    <tr id="TRWebLinkTypeCombo" runat="server">
                                                                        <td style="width: 28%" align="left">
                                                                            <asp:Label ID="WebLinkTypeLabel" runat="server" Text="Web Link Type" CssClass="label_textnormal"></asp:Label><asp:Label
                                                                                ID="WebLinkTypeMandatoryLabel" runat="server" Text="*" CssClass="label_mandatory"></asp:Label><asp:Label
                                                                                    ID="Label3" runat="server" Text=":" CssClass="label_textnormal"></asp:Label>
                                                                        </td>
                                                                        <td style="width: 72%" align="left">
                                                                            <telerik:RadComboBox ID="WebLinkTypeRadComboBox" runat="server" ZIndex="10000000" CssClass="RadComboBoxStyle"
                                                                                Filter="StartsWith" AutoPostBack="true" Width="230px" MaxHeight="150" Sort="Ascending"
                                                                                OnSelectedIndexChanged="WebLinkTypeRadComboBox_SelectedIndexChanged">
                                                                            </telerik:RadComboBox>
                                                                        </td>
                                                                    </tr>
                                                                    <tr id="PredefinedWebLink" runat="server" visible="false">
                                                                        <td style="width: 28%" align="left">
                                                                            <asp:Label ID="WebLinkLabel" runat="server" Text="Web Link" CssClass="label_textnormal"></asp:Label><asp:Label
                                                                                ID="WebLinkMandatoryLabel" runat="server" Text="*" CssClass="label_mandatory"></asp:Label><asp:Label
                                                                                    ID="Label9" runat="server" Text=":" CssClass="label_textnormal"></asp:Label>
                                                                        </td>
                                                                        <td style="width: 72%" align="left">
                                                                            <telerik:RadComboBox ID="PredefinedWebLinkRadComboBox" runat="server" ZIndex="10000000" CssClass="RadComboBoxStyle"
                                                                                Filter="StartsWith" Width="230px" MaxHeight="150" Sort="Ascending">
                                                                            </telerik:RadComboBox>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="width: 28%; padding-top: 8px;" align="left">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td width="72%" align="right" style="padding-right: 25px; padding-top: 8px;">
                                                                            <asp:Button ID="SaveLinkButton" runat="server" Text="Save" CssClass="rounded-button"
                                                                                OnClick="SaveLinkButton_Click" Width="60px" />
                                                                            <asp:Button ID="CancelCopyButton" runat="server" Text="Cancel" CssClass="rounded-button"
                                                                                Width="60px" />&nbsp;
                                                                            <asp:Button ID="SkipButton" runat="server" Text="Skip" CssClass="rounded-button"
                                                                                Width="60px" Visible="false" OnClick="SkipButton_Click" />
                                                                           
                                                                            &nbsp;
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                
                                                            </td>
                                                            <td align="center" width="2%">
                                                            </td>
                                                        </tr>
                                                         
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                                </td>
                            </tr>