Change the height of dropdownlist and disable the word wrapping

2 posts, 0 answers
  1. Arun
    Arun avatar
    3 posts
    Member since:
    Aug 2014

    Posted 28 Aug 2014 Link to this post

    I want to change the height of the telerik DropDownlist I changed the CSS as follows :

      height: 35px !important;
      font-size: 16px !important;

    .RadDropDownList_Default .rddlFocused
      height: 35px !important;
      font-size: 16px !important;

    But the result is not as expected. Please check the screenshot attached for reference.

    And the second thing is that I want word wrap to be disabled but the width of the dropdownlist unaffected(means only the string that can be accomadated should be displayed) and the complete string should be displayed when we hover over the list Item.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Aug 2014 in reply to Arun Link to this post

    Hi Arun,

    Please have a look into the sample code snippet which works fine at my end.

    <telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="---Saved Searched---">
            <telerik:DropDownListItem Text="This is a test saved search with big name so that we can test the effect of long" />
            <telerik:DropDownListItem Text="Item2" />

    .rddlPopup .rddlList
        height: 90px !important;
        width: 150px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;

    function pageLoad() {
        $('.rddlItem').mouseover(function () {
            $(this).context.title = $(this).context.innerText;

  3. DevCraft R3 2016 release webinar banner
Back to Top