[Solved] How to remove scroll bars from RadComboBox?

[Hong]

Hi,

      I used several Rad ComboBox in a DNN page, however, the scroll bars are always shown even there is only one item and the width is large enough. My question is how to remove the scroll bars, especially the horizontal scroll bar? Can you please look at the DNN page on the web site: http://dev.barbourconsulting.com/dnn/?  Username: userHR  Password: userHR123
     After log in, click "Human Resources" tab, then click "Edit" link for any employee record. Please check the ComboBox in the "Classification" box. Here are asp codes for the "Department" Combo Box:

<tr>
   <td class="labelWidth">
       Department
   </td>
   <td>
      <telerik:RadComboBox CssClass="ddlText" ID="DepartmentRadComboBox" Width="150px"
         runat="server" DataSourceID="dsDepartmentInfo" AppendDataBoundItems="true" Skin="Outlook"
         DataTextField="Department_Name" DataValueField="Department" DropDownWidth="230px"
         SelectedValue='<%# Bind("Department") %>'>
         <Items>
            <telerik:RadComboBoxItem Text="None" runat="server" />
         </Items>
         <ItemTemplate>
            <table class="ddlText" style="width: 210px; text-align: left; line-height: 10px">
              <tr>
                 <td style="width: 60px;">
                    <%#DataBinder.Eval(Container.DataItem, "Department")%>
                </td>
                <td style="width: 150px;">
                    <%#DataBinder.Eval(Container.DataItem, "Department_Name")%>
                </td>
             </tr>
            </table>
         </ItemTemplate>
         <HeaderTemplate>
           <table class="ddlText" style="width: 210px; text-align: left; line-height: 10px">
             <tr>
                 <td style="width: 60px;">
                     Department</td>
                <td style="width: 150px;">
                     Name</td>
             </tr>
           </table>
         </HeaderTemplate>
       </telerik:RadComboBox>
     </td>
   </tr>

Thank you,
Hong  

[Tom]

you can try adding the following CSS styles to your page or stylesheet to override any conflicting styles:

.RadComboBox .rcbScroll,
.RadComboBox .rcbScrollWrapper {
    overflow: hidden !important;
}

.RadComboBox .rcbScroll .rcbScrollWrap {
    overflow-x: hidden !important;
}  

time card calculator

[Yana]

Hello Hong,

Please add the following css styles to your page in order to remove horizontal scrollbars:

.RadComboBoxDropDown .rcbScroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Hong]

Thanks for your reply. I added your style definition in my ".css" file, however, the error message said: "overflow-y is not a known CSS property name.". How to fix that?

[Yana]

Hi Hong,

You should set Visual Studio to mark HTML validation and JavaScript errors as warnings rather than as errors that show up in the build error list, this can be done in Options->TextEditor->HTML->Validation.

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.