Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Floating combobox

9 Answers 148 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
dexter
Top achievements
Rank 1
dexter asked on 14 Feb 2012, 03:19 AM
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

9 Answers, 1 is accepted

Sort by
0
Abhishek
Top achievements
Rank 2
answered on 14 Feb 2012, 12:46 PM
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
0
dexter
Top achievements
Rank 1
answered on 15 Feb 2012, 05:03 AM
combobox-problem.PNG
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
0
Abhishek
Top achievements
Rank 2
answered on 15 Feb 2012, 06:52 AM
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
0
dexter
Top achievements
Rank 1
answered on 15 Feb 2012, 10:50 AM
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
0
Cat Cheshire
Top achievements
Rank 1
answered on 15 Feb 2012, 11:00 AM
You can add the RadScriptManager registration in your web.config manually : http://www.telerik.com/help/aspnet-ajax/radscriptmanager.html
0
dexter
Top achievements
Rank 1
answered on 16 Feb 2012, 03:11 AM
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
0
Kalina
Telerik team
answered on 16 Feb 2012, 04:25 PM
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 >>
0
dexter
Top achievements
Rank 1
answered on 17 Feb 2012, 11:51 AM
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
0
Kalina
Telerik team
answered on 17 Feb 2012, 03:44 PM
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 >>
Tags
ComboBox
Asked by
dexter
Top achievements
Rank 1
Answers by
Abhishek
Top achievements
Rank 2
dexter
Top achievements
Rank 1
Cat Cheshire
Top achievements
Rank 1
Kalina
Telerik team
Share this question
or