Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 30 Apr 2020 13:29 by ADMIN
Release R2 2020
SUNIL
Created on: 29 Nov 2017 18:15
Category: FormDecorator
Type: Bug Report
0
Option text is not wrapped in classic render mode for a select styled by FormDecorator
ISSUE:  Screenshot of this issue can be seen at https://goo.gl/F8C73V. 

This issue occurs in classic render mode when an option has long text that gets truncated instead of being wrapped.

HOW TO REPRODUCE:
Use the following page code to reproduce it. Expand the drop down and notice that the option just after None is truncated and not wrapped.

<%@ Page Language="C#" AutoEventWireup="true"%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" RenderMode="Classic" Skin="MetroTouch">
            <TargetControls>
                <telerik:TargetControl ControlID="RadFormDecorator1" />
            </TargetControls>
        </telerik:RadSkinManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Classic" ControlsToSkip="None" />
        <select id="dd1" style="width: 200px;">
            <option value="none">None</option>
            <option value="volvo">Volvo sdsd sdsd ddsds  sddsd dsdsd sdds sdsd sdsdsd sdsd sds ddsd xyz</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>

        <button id="btn1">Postback</button>
      
    </form>
</body>
</html>


RESOLUTION:
Put the following style in head part of your aspx page. This will fix this issue.

    <style>
        div.rfdSelectBox ul li {
            height: unset;
            height: none;/*for ie and edge*/
            height: auto;
        }
    </style>
1 comment
SUNIL
Posted on: 29 Nov 2017 18:32 
This issue does  not occur in lightweight or mobile render mode, but only in classic render mode.
Create an account Log In
View
Type
Status
Category