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

ComboBox unnecessary vertical scroll bar

4 Answers 41 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Sheng
Top achievements
Rank 1
Iron
Sheng asked on 20 Dec 2019, 11:34 PM

The version I use is 2015 Q2.  The ComboBox will display unnecessary vertical scroll bar in the dropdown list when "CheckBoxes" is used.

How to depress the vertical scroll bar when it's not needed?

 

        <telerik:RadComboBox ID="RadComboBox1" Runat="server" CheckBoxes="True">
            <Items>
                <telerik:RadComboBoxItem Text="Apple" Value="1" />
                <telerik:RadComboBoxItem Text="Banana" Value="2" />
                <telerik:RadComboBoxItem Text="Pear" Value="3" />
            </Items>
        </telerik:RadComboBox>

4 Answers, 1 is accepted

Sort by
0
Sheng
Top achievements
Rank 1
Iron
answered on 20 Dec 2019, 11:47 PM
Just add that the RenderMode I'm using is Lightweight (enforced in web.config file)
0
Accepted
Peter Milchev
Telerik team
answered on 25 Dec 2019, 11:33 AM

Hello Sheng,

The issue is resolved in Q1 2016. Meanwhile, the following styles should fix the issue:

    html .RadComboBoxDropDown {
        line-height: 1.42857
    }

        html .RadComboBoxDropDown .rcbHeader,
        html .RadComboBoxDropDown .rcbFooter {
            padding: 2px 5px;
        }

        html .RadComboBoxDropDown .rcbItem,
        html .RadComboBoxDropDown .rcbHovered,
        html .RadComboBoxDropDown .rcbDisabled,
        html .RadComboBoxDropDown .rcbLoading,
        html .RadComboBoxDropDown .rcbCheckAllItems,
        html .RadComboBoxDropDown .rcbCheckAllItemsHovered {
            padding: 2px 5px;
            margin: initial;
        }

            html .RadComboBoxDropDown .rcbItem > label,
            html .RadComboBoxDropDown .rcbHovered > label,
            html .RadComboBoxDropDown .rcbDisabled > label,
            html .RadComboBoxDropDown .rcbLoading > label,
            html .RadComboBoxDropDown .rcbCheckAllItems > label,
            html .RadComboBoxDropDown .rcbCheckAllItemsHovered > label {
                margin: -2px -5px;
                padding: 2px 5px;
            }

        html .RadComboBoxDropDown .rcbMoreResults {
            padding: 2px 5px;
        }

        html .RadComboBoxDropDown .rcbSeparatedList .rcbSeparator {
            padding-left: 5px
        }

        html .RadComboBoxDropDown .rcbSeparatedList .rcbItem,
        html .RadComboBoxDropDown .rcbSeparatedList .rcbHovered,
        html .RadComboBoxDropDown .rcbSeparatedList .rcbDisabled,
        html .RadComboBoxDropDown .rcbSeparatedList .rcbLoading {
            padding-left: 1em
        }

    html .RadComboBoxDropDown_rtl .rcbSeparatedList .rcbItem,
    html .RadComboBoxDropDown_rtl .rcbSeparatedList .rcbHovered,
    html .RadComboBoxDropDown_rtl .rcbSeparatedList .rcbDisabled,
    html .RadComboBoxDropDown_rtl .rcbSeparatedList .rcbLoading {
        padding-right: 1em
    }

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sheng
Top achievements
Rank 1
Iron
answered on 25 Dec 2019, 12:23 PM

Thank you Peter! We will update our version to the latest sometime in the future. For now we will use your styles as a temp fix.

Happy holiday!

0
Peter Milchev
Telerik team
answered on 25 Dec 2019, 12:26 PM

I am glad that the provided styles can be applied as a temporary fix until the upgrade to the latest version. 

Happy holiday to you too!

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
Sheng
Top achievements
Rank 1
Iron
Answers by
Sheng
Top achievements
Rank 1
Iron
Peter Milchev
Telerik team
Share this question
or