Floating combobox

10 posts, 0 answers
  1. dexter
    dexter avatar
    31 posts
    Member since:
    Jul 2011

    Posted 13 Feb 2012 Link to this post

    Hi,

    This is the scenario:
    I have a panel that enclose the whole page.
    The page is long enough to show the scrollbar.
    When you click on a combobox and the drop down list appears, try scrolling the page with the mouse wheel.
    You'll notice the drop down list floats on the page when the list should just follow the location of the combobox.

    Regards,
    Dexter
  2. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 14 Feb 2012 Link to this post

    Hello dexter,
    I too tried your same scenario  By applying panel to the whole page but i did't noticed any issue as you posted above.
    For more details can you please post your code here. So that i can try to solve your problem.

    Thanks,
    Abhishek K
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dexter
    dexter avatar
    31 posts
    Member since:
    Jul 2011

    Posted 14 Feb 2012 Link to this post

    Hi Abhishek,

    I've finally able to replicate the problem. The code is very straightforward, no problem here:
    <asp:Panel runat="server" ID="pnlData" Width="100%" ScrollBars="Auto">
        <table id="tblContent" style="position:relative;left:100px">
          <tr>                                    
            <td>          
              <BR /><BR /><BR /><BR /><BR /><BR />
              <telerik:RadComboBox ID="RadComboBox1" runat="server">
                <Items>
                  <telerik:RadComboBoxItem Text="YES" />
                  <telerik:RadComboBoxItem Text="NO" />
                </Items>
              </telerik:RadComboBox>
              <BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
              <BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
              <BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
              <BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
            </td>
          </tr>      
        </table>
      </asp:Panel>


    This is what happened when i try to replicate the problem:
    1. I copied the whole code from the problem page and paste it in a new file.
    2. When i try to execute i got error saying "~/Telerik.Web.UI.WebResource.axd' is missing in web.config. RadScriptManager requires a HttpHandler registration in web.config. Please, use the control Smart Tag to add the handler automatically, or see the help for more information: Controls > RadScriptManager "
    3.
    Since there is no smart tag available at the RadScriptManager object, i have no choice but to copy the web.config exactly from the project with the problem page.
    4. When execute, the page has no error but the combobox problem is there.
    5. So its definitely due to the web.config settings right? Which settings could possibly create this problem?

    I've attached the image to show the problem. As you can see, the dropdown list is separated from the combobox when it is scrolled.

    Hope to hear from you soon.

    Regards,
    Dexter
  5. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 15 Feb 2012 Link to this post

    Hello dexter,

    There is no issue or problem with your code.I have tried your posted code in my sample application please have one look in below code. I think you left to add Telerik Reference in the Master Page or Simple Aspx page. Also by seeing your above statement your web.config settings are not proper because of that you getting above errors. So reconfigure it first and then run your same posted code. One suggestion for you try to avoid the use of <BR/> Tags instead of that use CSS for proper alignment.
    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Radcombo_Float.aspx.cs"
        Inherits="LearnTelerikControls.RadCombo.Radcombo_Float" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <div>
            <asp:Panel runat="server" ID="pnlData" Width="100%" ScrollBars="Auto">
                <table id="tblContent" style="position: relative; left: 100px">
                    <tr>
                        <td>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <telerik:RadComboBox ID="RadComboBox1" runat="server">
                                <Items>
                                    <telerik:RadComboBoxItem Text="YES" />
                                    <telerik:RadComboBoxItem Text="NO" />
                                </Items>
                            </telerik:RadComboBox>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>

    Let me know if any issue.

    Regards,
    Abhishek K
  6. dexter
    dexter avatar
    31 posts
    Member since:
    Jul 2011

    Posted 15 Feb 2012 Link to this post

    Hi Abishek,

    Thanks for your reply again.
    Actually the problem now is i have no idea how to configure the web.config.
    Usually i just click on the smart tag in the RadScript object to add settings to the web.config automatically.
    But in this case the smart tag doesn't appear. So i'm forced to use the existing web.config.

    In your opinion, which settings would be the one causing the problem?

    Regards,
    Dexter
  7. Cat Cheshire
    Cat Cheshire avatar
    128 posts
    Member since:
    Jun 2010

    Posted 15 Feb 2012 Link to this post

    You can add the RadScriptManager registration in your web.config manually : http://www.telerik.com/help/aspnet-ajax/radscriptmanager.html
  8. dexter
    dexter avatar
    31 posts
    Member since:
    Jul 2011

    Posted 15 Feb 2012 Link to this post

    Hi,

    I got the error because the telerik reference in the httpHandlers module is not present.
    After i paste this line:

    <

     

     

    add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />

     


    There is no error but I'm still having the floating dropdown list problem. Did you manage to
    replicate the problem?

    How can i fix this problem?

    Regards,
    Dexter
  9. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 16 Feb 2012 Link to this post

    Hi dexter,

    Indeed there is an issue with the RadComboBox dropdown when the control is placed within a scrollable container.
    Please take a look at this forum thread - the approach that you can use is described there.
    Additionally there is a sample project that you can download and test.

    Greetings,
    Kalina
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  10. dexter
    dexter avatar
    31 posts
    Member since:
    Jul 2011

    Posted 17 Feb 2012 Link to this post

    Hi Kalina,

    Thanks for the solution. It works.
    However, i was expecting a different solution though.

    Is it possible to let the dropdown list attached to the combobox when its being scrolled?
    Although this solution works, when i scroll the scrollbar, i do see the detachment of the drop down list
    for a short while.

    Hope to hear from you soon.

    Thanks,
    Dexter
  11. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 17 Feb 2012 Link to this post

    Hello dexter,

    I understand your point.
    We have tried different ways to overcome the issue - but I am afraid that repositioning the dropdown while user scrolls in order to display it attached at the input is not possible.
    The best solution is simply to close the dropdown.

    Kind regards,
    Kalina
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017