This is a migrated thread and some comments may be shown as answers.

telerik Combo Box shows different look when scroll down that page

10 Answers 171 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Nani asked on 24 Nov 2011, 11:50 AM

Normal-Image.png

Flying-Images.png

HI,

I am using telerik control. when i click on Combobox( Not only Combobox event raddatepicker,radAjaxloading panel....etc) it expand with items.( Here i am attach image normalImage.png). after i am scrolling my page down /up it showing different . Here i am attaching that different look image ( i.e flying images.png ) . i am using asp.net webapplication in Cs

10 Answers, 1 is accepted

answered on 25 Nov 2011, 06:31 AM

differentLook.png

hi ,
Thanks for your quick replay . In my applciation i am not using splitter . my code :
In this code my observation i am given div height is 10000px;

i am attaching output also as differentLook.png

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="rdScrptFacilityMgr" runat="server" EnablePageMethods="true">

</telerik:RadScriptManager>

<div class="divcontentOut" style="height: 400px; overflow: auto;">

<fieldset class="fieldset">

<legend class="legend"><b>

<asp:Literal ID="ltlDeal" runat="server" Text="Deal"></asp:Literal></b></legend>

<div style="height:10000px;background-color:#D5E2F2;padding-top:20px">

<table class="FourColumnTable" cellpadding="1" cellspacing="0">

<tr>

<td class="ThirdColumn">

<span>Content</span><span class="required">*</span>

</td>

<td style="float: left; width: 80px">

<span style="padding-right: 5px">Per</span>

<telerik:RadComboBox ID="ddlper" Width="50px" runat="server" Skin="Office2007" Height="150px"

TabIndex="8">

<Items>

<telerik:RadComboBoxItem Value='1' Text='1' />

<telerik:RadComboBoxItem Value='2' Text='2' />

<telerik:RadComboBoxItem Value='3' Text='3' />

<telerik:RadComboBoxItem Value='4' Text='4' />

<telerik:RadComboBoxItem Value='5' Text='5' />

<telerik:RadComboBoxItem Value='6' Text='6' />

<telerik:RadComboBoxItem Value='7' Text='7' />

<telerik:RadComboBoxItem Value='8' Text='8' />

<telerik:RadComboBoxItem Value='9' Text='9' />

<telerik:RadComboBoxItem Value='10' Text='10' />

<telerik:RadComboBoxItem Value='11' Text='11' />

<telerik:RadComboBoxItem Value='12' Text='12' />

<telerik:RadComboBoxItem Value='13' Text='13' />

<telerik:RadComboBoxItem Value='14' Text='14' />

<telerik:RadComboBoxItem Value='15' Text='15' />

</Items>

</telerik:RadComboBox>

</td>

</tr>

</table>

</div>

</fieldset>

<br />

</div>

</form>

</body>

</html>

answered on 30 Nov 2011, 02:00 PM

Hello Nani,

You can close the "ddlper" RadComboBox dropdown upon control container scrolling in this way:

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="rdScrptFacilityMgr"

runat="server" EnablePageMethods="true">

</telerik:RadScriptManager>

<script type="text/javascript">

function pageLoad() {

$telerik.$("div").scroll(function(){

var combo = $find("<%=ddlper.ClientID %>");

if (combo.get_dropDownVisible())

combo.hideDropDown();

});

}

</script>

<div class="divcontentOut" style="height: 400px; overflow: auto;">

<fieldset class="fieldset">

<legend class="legend"><b>

<asp:Literal ID="ltlDeal" runat="server" Text="Deal"></asp:Literal>

</b></legend>

<div class="a" id="container"

style="height: 10000px; background-color: #D5E2F2;

padding-top: 20px">

<table class="FourColumnTable" cellpadding="1" cellspacing="0">

<tr>

<td class="ThirdColumn">

<span>Content</span><span class="required">*</span>

</td>

<td style="float: left; width: 80px">

<span style="padding-right: 5px">Per</span>

<telerik:RadComboBox ID="ddlper"

Width="50px" runat="server" Skin="Office2007" Height="150px"

TabIndex="8">

<Items>

<telerik:RadComboBoxItem Value='1' Text='1' />

<telerik:RadComboBoxItem Value='2' Text='2' />

<telerik:RadComboBoxItem Value='3' Text='3' />

<telerik:RadComboBoxItem Value='4' Text='4' />

<telerik:RadComboBoxItem Value='5' Text='5' />

<telerik:RadComboBoxItem Value='6' Text='6' />

<telerik:RadComboBoxItem Value='7' Text='7' />

<telerik:RadComboBoxItem Value='8' Text='8' />

<telerik:RadComboBoxItem Value='9' Text='9' />

<telerik:RadComboBoxItem Value='10' Text='10' />

<telerik:RadComboBoxItem Value='11' Text='11' />

<telerik:RadComboBoxItem Value='12' Text='12' />

<telerik:RadComboBoxItem Value='13' Text='13' />

<telerik:RadComboBoxItem Value='14' Text='14' />

<telerik:RadComboBoxItem Value='15' Text='15' />

</Items>

</telerik:RadComboBox>

</td>

</tr>

</table>

</div>

</fieldset>

<br />

</div>

</form>

</body>

Regards,
Kalina
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

answered on 01 Dec 2011, 06:37 AM

Hi Kumar,

function pageLoad() {

$telerik.$("div").scroll(function () {

var comboCollection = $(".FindINCSS_RadComboBox");

for (var i = 0; i < comboCollection.length; i++) {

var combo = $find(comboCollection[i].id);

if (combo.get_dropDownVisible())

combo.hideDropDown();

}

});

}

  <telerik:RadComboBox ID="RadComboBox" runat="server" Skin="Office2007"

                            CssClass="FindINCSS_RadComboBox" TabIndex="1" >

                        </telerik:RadComboBox>

Write this above code in Master Page and give all RadComboBox CSSClass = "FindINCSS_RadComboBox" then its works perfect . i am using this solution.

answered on 03 Dec 2011, 04:07 PM

Hi all,

same problem here. All comboboxes dropdowns will be not scrolled if the page will be scrolled up or down. I don't know why. When I check the demo http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/overlay/defaultcs.aspx the dropdown boxes are scrolling as expected. I'm using the latest Telerik version. And we use the controls in web parts in a SharePoint 2010 context. The SharePoint pages are unsing the html strict mode.
Any suggestions whey the comboboxes are working different from dhe demo?

We don't need to add javascript workarounds. Normally the behavior of the comboboex in the demo should be standard.

Regards,
Ralf

answered on 05 Dec 2011, 09:26 AM

Hello,

TCS, you could use the same logic for finding the pickers as for the ComboBox, just add to them some class and use similar code just calling the hidePopup() and hideTimePopup() functions.

Ralf, the problem does not appear on the site because it is used the browser scroll on this pages. The problem comes when you use auto overflow for the div around the ComboBox, since the dropdown is absolute positioned element as explained in this forum thread.

Greetings,
Vasil
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

telerik Combo Box shows different look when scroll down that page

10 Answers, 1 is accepted