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

Change the height of dropdownlist and disable the word wrapping

1 Answer 53 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Arun
Top achievements
Rank 1
Arun asked on 28 Aug 2014, 06:02 AM
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.
 

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 28 Aug 2014, 07:02 AM
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.
Tags
DropDownList
Asked by
Arun
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Share this question
or