ComboBox dropdown list not in place when scrolling with mouse

6 posts, 0 answers
  1. rupraj51
    rupraj51 avatar
    4 posts
    Member since:
    Jan 2007

    Posted 07 Jun 2012 Link to this post

    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
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 11 Jun 2012 Link to this post

    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
    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 their blog feed now.
  3. K10
    K10 avatar
    5 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2013 Link to this post

     
  4. K10
    K10 avatar
    5 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2013 Link to this post

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

    Thanks
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Mar 2013 Link to this post

    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.
  6. K10
    K10 avatar
    5 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2013 Link to this post

    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>
Back to Top