Dropdown scroll bar with datepicker in template

4 posts, 1 answers
  1. Baatezu
    Baatezu avatar
    110 posts
    Member since:
    Aug 2007

    Posted 06 Aug 2010 Link to this post

    My problem has a long description, hopefully the subject made enough sense. :) I have a datepicker control in the itemtemplate of the combobox, when the popup calendar goes away, the Combobox drop down gets a scroll bar. This only happens in chrome.

    The RadComboBox is created as
    <telerik:RadComboBox ID="cboDateRange" runat="server" width="175px"
        DropDownWidth="325px" CloseDropDownOnBlur="False" Font-Bold="True" 
        AllowCustomText="false">
        <ItemTemplate>
            <asp:Label ID="lblDateRange" runat="server" Text="Date Range" Font-Bold="true"></asp:Label><br />
            <div id="divStartDateSelected" class="divFloatLeft">
                <telerik:RadDatePicker ID="dateStartDate" runat="server" Width="90px" >
                    <DateInput SelectionOnFocus="SelectAll">
                    </DateInput>
                    <Calendar ShowRowHeaders="false"></Calendar>
                </telerik:RadDatePicker>
            </div>
            <div class="divFloatLeft">
                 <asp:Label ID="lblDateRangeDash" runat="server" Text="-"></asp:Label>  
            </div>
            <div id="divEndDateSelected" class="divFloatLeft">
                <telerik:RadDatePicker ID="dateEndDate" runat="server" Width="90px">
                    <DateInput SelectionOnFocus="SelectAll">
                    </DateInput>
                    <Calendar ShowRowHeaders="false"></Calendar>
                </telerik:RadDatePicker>
            </div>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem Text="" Selected="True" />
        </Items>
    </telerik:RadComboBox>

    I haven't had time to create a minimal project to dig into it more, but thought I'd post to see if there was any quick fixes or known problems. I'm running the latest release of Telerik and Chrome is 5.0.375.125.

    Thanks
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Aug 2010 Link to this post

    Hi Baatezu,

    Please add the following css style to your page in order to prevent the scrollbar:

    <style type="text/css">
        .RadComboBoxDropDown .rcbScroll {  overflow: hidden !important; }
    </style>


    Regards,
    Yana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Baatezu
    Baatezu avatar
    110 posts
    Member since:
    Aug 2007

    Posted 10 Aug 2010 Link to this post

    Perfect, thanks.

    EDIT - Well... Almost perfect. A quick gotcha is that it affects ALL RadComboBoxes on the page. :) I did a quick rename to rcbSrollHidden and use jQuery to add it to that specific combo box and then it worked perfectly. :)
    It was the right direction, which is the best kinda help. hehe
  5. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 23 Apr 2011 Link to this post

    As Baatezu said, the suggestion provided by Telerik support removes the scroll bar for all RadComboBoxes within the affected scope of the CSS.

    For the archives, here is a function that will apply the correct CSS to just those RadComboBoxes  you want this to affect.

    1.  Add this function to your solution:
    function radComboBox_Load(sender) {
        var rcbDropDownId = '#' + sender.get_dropDownElement().id;
        $(rcbDropDownId + ' .rcbScroll').removeClass('rcbScroll');
        $(rcbDropDownId).css('overflow', 'hidden');
    }

    2.  Attach this function to the OnClientLoad event of any RadComboBoxes you need to have the scrollbar removed from.
    <telerik:RadComboBox ... OnClientLoad="radComboBox_Load" ... />

    Thad

Back to Top