Change the height of dropdownlist and disable the word wrapping

[Arun]

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

.RadDropDownList_Default
  {
  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.
 

[Shinu]

Hi Arun,

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

ASPX:

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="---Saved Searched---">
    <Items>
        <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" />
    </Items>
</telerik:RadDropDownList>

CSS:

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

JavaScript:

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

Thanks,
Shinu.