<telerik:RadFormDecorator ID="rfd1" EnableEmbeddedSkins="true" EnableAjaxSkinRendering="true" DecoratedControls="Buttons, Scrollbars, Select, Textbox, Textarea" Runat="server" Skin="Vista"/>I have added RadFormDecorator that decorates all the asp:dropdownlist. However, when I tab through the page...it does not highlight/focus on any dropdownlists. Please advice how to fix this!
Thanks!
3 Answers, 1 is accepted
0
Jinisha
Top achievements
Rank 1
Rank 1
answered on 24 Oct 2012, 12:59 PM
Also I am not able to select the dropdown using the keyboard.
0
Jinisha
Top achievements
Rank 1
Rank 1
answered on 24 Oct 2012, 01:10 PM
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<telerik:RadScriptManager ID="ScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadFormDecorator ID="rfd1" EnableEmbeddedSkins="true" EnableAjaxSkinRendering="true" DecoratedControls="Buttons, Scrollbars, Select, Textbox, Textarea, Label, ValidationSummary"
Runat="server" Skin="Vista"/>
<h2>TabIndex Test</h2>
<h5>Form Without Tables</h5>
<form action="#" method="post">
<p>First Item : <input type="text" name="first" tabindex="1" /></p>
<p>Second Item : <input type="text" name="second" tabindex="2" /></p>
<p>Third Item : <select name="third" tabindex="3"><option value="foo">Foo</option><option value="bar">Bar</option></select></p>
<p>Fourth Item : <select name="fourth" tabindex="4"><option value="foo">Foo</option><option value="bar">Bar</option></select></p>
<p>Fifth Item : <input type="text" name="fifth" tabindex="5" /></p>
<input type="submit" value="Submit" tabindex="6" />
</form>
</body>
</html>
I have added RadFormDecorator that decorates all the asp:dropdownlist. However, when I tab through the page...it does not highlight/focus on any dropdownlists. Please advice how to fix this!
Thanks!
0
Hello,
In order to beautify the elements it needs to add some HTML wrappers that we can style properly around (or sometimes instead of) the elements. Actually we remove the real select elements and replace it with unordered list, as we are not able to style the <select> element, while we do not have problems to style <ul>. As after the decoration this is not a real HTML (select) tag it has some issues with keyboard support and we have done everything possible with regard to the many differences between the browsers. Currently navigation through the keyboard is supported in IE and you can use the up and down arrows to navigate through the options and enter or Alt+down to expand the dropdown. It is also not possible to change its style to look selected (i.e. the usual blue background) at this point. If a viable cross-browser solution is found we will incorporate it in the code. Please also note that the focused style varies between browsers - e.g. IE creates a dotted line, while FF adds a box that resembles a shadow around the buttons. All that being said - if keyboard support is extremely important for your site the best suggestion is to revert to a page without the FromDecorator, or to Skip just the Drop down decoration using ControlsToSkip property.
Greetings,
Bozhidar
the Telerik team
In order to beautify the elements it needs to add some HTML wrappers that we can style properly around (or sometimes instead of) the elements. Actually we remove the real select elements and replace it with unordered list, as we are not able to style the <select> element, while we do not have problems to style <ul>. As after the decoration this is not a real HTML (select) tag it has some issues with keyboard support and we have done everything possible with regard to the many differences between the browsers. Currently navigation through the keyboard is supported in IE and you can use the up and down arrows to navigate through the options and enter or Alt+down to expand the dropdown. It is also not possible to change its style to look selected (i.e. the usual blue background) at this point. If a viable cross-browser solution is found we will incorporate it in the code. Please also note that the focused style varies between browsers - e.g. IE creates a dotted line, while FF adds a box that resembles a shadow around the buttons. All that being said - if keyboard support is extremely important for your site the best suggestion is to revert to a page without the FromDecorator, or to Skip just the Drop down decoration using ControlsToSkip property.
Greetings,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.