Hi, I'm working with a radmenu that has only one root item. The behavior I want is for a user to be able to click on the menu item, get a dropdown with login controls, and use those to log into the site I'm working on. I already set ClickToOpen="true", and I'm using a ContentTemplate for the textboxes, button, and so forth. I've tested my setup in Chrome, IE, and Safari on desktop browsers, and it works exactly the way I want. The problem occurs on mobile browsers (tested on Safari and Chrome for iOS 8, and Chrome for Android). When I go to my site on a smartphone, for example, and tap on a textbox to start entering login credentials, the whole menu closes. When I tested in Chrome on iOS 8, I noticed that the onscreen keys would pop up for a split second, and then go away along with the menu. This makes it impossible to use the login controls on a mobile device.
The client I'm working with insists that the site be mobile-friendly, so I need to figure this out, and would like to be able to use the radmenu control, though I'm open to other options that will achieve the functionality I need.
Here's my markup for the controls (sorry the formatting isn't great):
01.
<
div
class
=
"login-box"
>
02.
<
telerik:RadMenu
ID
=
"rm1"
runat
=
"server"
CssClass
=
"RadMenu"
ClickToOpen
=
"true"
OnClientItemOpened
=
"ExternalitemOpened"
RenderMode
=
"Classic"
>
03.
<
Items
>
04.
<
telerik:RadMenuItem
runat
=
"server"
PostBack
=
"false"
>
05.
<
ContentTemplate
>
06.
<
div
id
=
"loginDropDown"
>
07.
<
h2
>Log In </
h2
>
08.
<
span
class
=
"failureNotification"
>
09.
<
asp:Literal
ID
=
"FailureText"
runat
=
"server"
></
asp:Literal
>
10.
</
span
>
11.
<
asp:ValidationSummary
ID
=
"vdsumLogin"
runat
=
"server"
CssClass
=
"failureNotification"
ValidationGroup
=
"vdgrpLogin"
/>
12.
<
div
>
13.
<
fieldset
>
14.
<
legend
>Account Information</
legend
>
15.
<
p
>
16.
<
asp:Label
ID
=
"lblUsername"
runat
=
"server"
AssociatedControlID
=
"txtUserN"
>Username:</
asp:Label
>
17.
<
asp:TextBox
ID
=
"txtUserN"
runat
=
"server"
CssClass
=
"textEntry"
></
asp:TextBox
>
18.
<
asp:RequiredFieldValidator
ID
=
"rfvUserName"
runat
=
"server"
ControlToValidate
=
"txtUserN"
CssClass
=
"failureNotification"
ErrorMessage
=
"Please enter a username"
ToolTip
=
"Required field"
ValidationGroup
=
"vdgrpLogin"
>* Required</
asp:RequiredFieldValidator
>
19.
</
p
>
20.
<
p
>
21.
<
asp:Label
ID
=
"lblPassword"
runat
=
"server"
AssociatedControlID
=
"txtPassword"
>Password:</
asp:Label
>
22.
<
asp:TextBox
ID
=
"txtPassword"
runat
=
"server"
CssClass
=
"passwordEntry"
TextMode
=
"Password"
></
asp:TextBox
>
23.
<
asp:RequiredFieldValidator
ID
=
"rfvPassword"
runat
=
"server"
ControlToValidate
=
"txtPassword"
CssClass
=
"failureNotification"
ErrorMessage
=
"Please enter a password"
ToolTip
=
"Required field"
ValidationGroup
=
"vdgrpLogin"
>* Required</
asp:RequiredFieldValidator
>
24.
</
p
>
25.
</
fieldset
>
26.
<
p
class
=
"submitButton"
>
27.
<
asp:Button
ID
=
"btnLogin"
runat
=
"server"
CommandName
=
"Login"
Text
=
"Log In"
ValidationGroup
=
"vdgrpLogin"
CssClass
=
"normalButton"
OnClick
=
"btnLogin_Click"
/>
28.
</
p
>
29.
</
div
>
30.
<
a
href
=
"../Register"
>register</
a
><
br
/>
31.
<
a
href
=
"../Account/ForgotPassword.aspx"
>forgot password?</
a
><
br
/>
32.
<
a
href
=
"../Account/RetrieveUsername.aspx"
>forgot username?</
a
>
33.
</
div
>
34.
</
ContentTemplate
>
35.
</
telerik:RadMenuItem
>
36.
</
Items
>
37.
</
telerik:RadMenu
>
38.
</
div
>
Here's the script I'm using:
function
ExternalitemOpened(s, e) {
if
($telerik.isIE8) {
// Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
$telerik.$(
"li"
, e.get_item().get_element())
.each(
function
() {
this
.style.cssText =
this
.style.cssText; });
}
}
​
I'm also setting the text of the root item from code-behind. It tells the user they can click the menu to login or logout, depending on context. If they're currently logged in, then clicking the menu will fire an event handler that will log them out. Selections from that code:
rm1.Items(0).Text =
"(logout)"
AddHandler
rm1.ItemClick,
AddressOf
rm1_ItemClick1
rm1.Items(0).Text =
"(committee login)"
Protected
Sub
rm1_ItemClick1(sender
As
Object
, e
As
Telerik.Web.UI.RadMenuEventArgs)
Response.Redirect(
"~/Account/Logout.aspx"
)
End
Sub
Also, the CSS from the markup:
.login-box{
width
:
1024px
;
height
:
50px
;
margin
:
0
auto
;
margin-top
:
8px
;
margin-bottom
:
8px
;
padding
:
0
;
background-color
:
#E6E6E6
;
text-align
:
left
;
}
.login-box h
1
{
font-size
:
1em
;
font-weight
:
normal
;
letter-spacing
:
1px
;
margin
:
0px
0px
0px
20px
;
text-align
:
left
;
padding-top
:
15px
;
display
:inline-
block
;
}
.login-box a:hover{
color
:
#4AB97B
;
}
.RadMenu .rmRootGroup{
border
:
none
!important
;
}
.RadMenu .rmText{
background-color
:
#E6E6E6
!important
;
font-size
:
1em
!important
;
font-weight
:
normal
!important
;
letter-spacing
:
1px
!important
;
margin
:
0px
0px
0px
20px
!important
;
text-align
:
left
!important
;
padding-top
:
12px
!important
;
}
.RadMenu .rmText:hover{
color
:
#4AB97B
!important
;
}
.RadMenu a.rmSelected{
background-color
:
#E6E6E6
!important
;
}
.RadMenu .rmLink{
padding
:
0
0
0
0px
!important
;
}
.RadMenu .rmPopup.rmContentTemplate{
background-color
:
#E6E6E6
!important
;
}
.RadMenu_Default .rmFirst a.rmLink, .RadMenu_Default .rmFirst a.rmLink:hover, .RadMenu_Default .rmLast .rmText,
.RadMenu_Default .rmLast a.rmLink:hover .rmText, .RadMenu_Default .rmVertical a.rmLink, .RadMenu_Default .rmVertical .rmText{
background-color
:
#E6E6E6
!important
;
font-size
:
medium
!important
;
}
.failureNotification
{
font-size
:
1.2em
;
color
: Red;
}
input.passwordEntry
{
border
:
1px
solid
#ccc
;
}
.submitButton
{
text-align
:
right
;
padding-right
:
10px
;
}
.normalButton
{
color
:
#FFFFFF
;
border-radius:
30px
;
background-color
:
#579767
;
border
:
2px
solid
#000000
;
width
:
150px
;
height
:
30px
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
font-size
:
large
;
}
.normalButton:disabled
{
color
:
#686868
;
border-radius:
30px
;
background-color
:
#969696
;
border
:
2px
solid
#D1D1D1
;
width
:
150px
;
height
:
30px
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
font-style
:
italic
;
font-size
:
large
;
}
And the mobile CSS (where applicable):
@media only
screen
and (
max-width
:
768px
) {
.login-box{
width
:
100%
;
height
:
50px
;
margin
:
0
auto
;
margin-top
:
8px
;
margin-bottom
:
8px
;
padding
:
0
;
background-color
:
#E6E6E6
;
text-align
:
left
;
}
.login-box h
1
{
font-size
:
1em
;
font-weight
:
normal
;
letter-spacing
:
1px
;
margin
:
0px
0px
0px
10px
;
text-align
:
left
;
padding-top
:
15px
;
}
.normalButton
{
color
:
#FFFFFF
;
border-radius:
30px
;
background-color
:
#579767
;
border
:
2px
solid
#000000
;
width
:
150px
;
height
:
30px
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
font-size
:
medium
;
}
.normalButton:disabled
{
color
:
#686868
;
border-radius:
30px
;
background-color
:
#969696
;
border
:
2px
solid
#D1D1D1
;
width
:
150px
;
height
:
30px
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
font-style
:
italic
;
font-size
:
medium
;
}
}
I have spent several hours playing with the markup and searching online for other instances of this issue, with no fix. I looked into using RenderMode="auto" or RenderMode="mobile", but neither worked the way I needed. I am using version 2015.2.623.40 of the web controls.
Please help me get this working on mobile browsers.