Completed
Last Updated:
04 Aug 2020 13:11
by ADMIN
Release R3 2020
SUNIL
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
ISSUE:
Screenshot of this issue can be seen at https://goo.gl/c9WriW
Also, a video of this can be seen at https://goo.gl/d4nnKq
This issue occurs in Lightweight or Mobile render mode. In classic render mode, this issue does not exist.
HOW TO REPRODUCE:
Use the following page markup to reproduce this problem.
<%@ 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="Lightweight" Skin="MetroTouch">
<TargetControls>
<telerik:TargetControl ControlID="RadFormDecorator1" />
</TargetControls>
</telerik:RadSkinManager>
<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>
</select>
<button id="btn1">Postback</button>
</form>
</body>
</html>
RESOLUTION:
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.
<style>
div.rfdSelectBox ul li {
min-height: 16px;
}
.rfdSelect {
min-height: 32px !important;
}
</style>
For all other skins, use the style element as below.
<style>
div.rfdSelectBox ul li {
min-height: 16px;
}
.rfdSelect {
min-height: 32px;
}
</style>
</head>
1 comment
ADMIN
Rumen
Posted on:
04 Aug 2020 13:11