Last Updated: 04 Aug 2020 13:11 by ADMIN
Release R3 2020
Created on: 29 Nov 2017 18:37
Category: FormDecorator
Type: Bug Report
option with empty text is causing height of option and select to become too small

Screenshot of this issue can be seen at
Also, a video of this can be seen at

This issue occurs in Lightweight or Mobile render mode. In classic render mode, this issue does not exist.


Use the following page markup to reproduce this problem.

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

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <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>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" RenderMode="Lightweight" Skin="MetroTouch">
                <telerik:TargetControl ControlID="RadFormDecorator1" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" RenderMode="Lightweight" ControlsToSkip="None" />
        <select id="ddl2" runat="server" style="width: 175px;">
            <option value=""></option>
            <option value="dallas">Dallas</option>
            <option value="chicago">Chicago</option>
            <option value="toronto">Toronto</option>
            <option value="austin">Austin</option>

        <button id="btn1">Postback</button>


Add the following style in your aspx head part based on the skin you are using for FormDecorator.

If skin is any one these big skins -  MetroTouch or BlackMetroTouch or Material or Silk or Glow or Bootstrap, then use the style below.
        div.rfdSelectBox ul li {
            min-height: 16px;

        .rfdSelect {
            min-height: 32px !important;

For all other skins, use the style element as below.

        div.rfdSelectBox ul li {
            min-height: 16px;

        .rfdSelect {
            min-height: 32px;
1 comment
Posted on: 04 Aug 2020 13:11

Hi Sunil,

Thank you for reporting this issue!

I have good news that it will be fixed in R3 2020 due in mid-September!

Best Regards,
Progress Telerik