I have a problem where some mobile devices (ipad and android) closes the menu when focusing on a textbox inside an template. The scenario can be seen below on the Login tab.
On desktop browsers it seems to be working as intended.
3 Answers, 1 is accepted
After updating to the latest build it also seems like the RadSiteMapNode with navigateurl stops working.
Menu code below,
<
telerik:RadMenu
ID
=
"menu"
Runat
=
"server"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
Width
=
"100%"
OnClientLoad
=
"clientLoad"
CollapseAnimation-Duration
=
"600"
ExpandAnimation-Duration
=
"600"
CollapseAnimation-Type
=
"OutQuart"
ExpandAnimation-Type
=
"OutQuart"
>
<
Items
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Home"
Value
=
"home"
NavigateUrl
=
"Default.aspx"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Company"
Value
=
"about"
NavigateUrl
=
"about.aspx"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Products"
Value
=
"products"
PostBack
=
"false"
GroupSettings-OffsetX
=
"-24"
>
<
ContentTemplate
>
<
div
class
=
"menuProductContent"
>
<
table
width
=
"100%"
>
<
tr
>
<
td
style
=
"vertical-align:top;"
>
<
h1
><
asp:Label
runat
=
"server"
ID
=
"labProductgroupsHeader"
Text
=
"Product groups"
></
asp:Label
></
h1
>
<
telerik:RadSiteMap
runat
=
"server"
ID
=
"productIndex"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
DefaultLevelSettings-ListLayout-RepeatDirection
=
"Vertical"
DefaultLevelSettings-ListLayout-RepeatColumns
=
"2"
OnNodeDataBound
=
"productIndex_NodeDataBound"
>
<
Nodes
>
<
telerik:RadSiteMapNode
Text
=
"Singlestems & sprays"
NavigateUrl
=
"products.aspx?productgroup=1"
></
telerik:RadSiteMapNode
>
<
telerik:RadSiteMapNode
Text
=
"flowers"
NavigateUrl
=
"products.aspx?productgroup=2"
></
telerik:RadSiteMapNode
>
<
telerik:RadSiteMapNode
Text
=
"Succulents & round shaped items"
NavigateUrl
=
"products.aspx?productgroup=3"
></
telerik:RadSiteMapNode
>
<
telerik:RadSiteMapNode
Text
=
"Potted and hanging bushes"
NavigateUrl
=
"products.aspx?productgroup=4"
></
telerik:RadSiteMapNode
>
<
telerik:RadSiteMapNode
Text
=
"Garlands"
NavigateUrl
=
"products.aspx?productgroup=5"
></
telerik:RadSiteMapNode
>
<
telerik:RadSiteMapNode
Text
=
"Trees"
NavigateUrl
=
"products.aspx?productgroup=6"
></
telerik:RadSiteMapNode
>
<
telerik:RadSiteMapNode
Text
=
"Candlerings & wreaths"
NavigateUrl
=
"products.aspx?productgroup=7"
></
telerik:RadSiteMapNode
>
</
Nodes
>
</
telerik:RadSiteMap
>
</
td
>
<
td
style
=
"text-align:right; vertical-align:top;"
>
<
asp:Panel
runat
=
"server"
ID
=
"panSearch"
DefaultButton
=
"btnSearch"
>
<
h1
><
asp:Label
runat
=
"server"
ID
=
"labSearchHeader"
Text
=
"Search"
></
asp:Label
></
h1
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtSearch"
EmptyMessage
=
"Partno. / Description"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
></
telerik:RadTextBox
>
<
telerik:RadButton
runat
=
"server"
ID
=
"btnSearch"
Text
=
"Search"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
OnClick
=
"btnSearch_Click"
></
telerik:RadButton
>
</
asp:Panel
>
<
br
/>
<
asp:Panel
runat
=
"server"
ID
=
"panPage"
DefaultButton
=
"btnPage"
>
<%--<
h1
><
asp:Label
runat
=
"server"
ID
=
"labPageHeader"
Text
=
"Page"
></
asp:Label
></
h1
>--%>
<
telerik:RadNumericTextBox
runat
=
"server"
ID
=
"txtPage"
NumberFormat-DecimalDigits
=
"0"
EmptyMessage
=
"Catalogue page no."
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
></
telerik:RadNumericTextBox
>
<
telerik:RadButton
runat
=
"server"
ID
=
"btnPage"
Text
=
"Go to"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
OnClick
=
"btnPage_Click"
></
telerik:RadButton
>
</
asp:Panel
>
<
asp:Panel
runat
=
"server"
ID
=
"panCart"
>
<
br
/><
br
/>
<
telerik:RadButton
runat
=
"server"
ID
=
"btnCart"
Text
=
"GÃ¥ till kundvagn"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
PostBackUrl
=
"cart.aspx"
></
telerik:RadButton
>
</
asp:Panel
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
ContentTemplate
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Contact"
Value
=
"contact"
NavigateUrl
=
"contact.aspx"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Administration"
Value
=
"administration"
PostBack
=
"false"
ForeColor
=
"IndianRed"
Visible
=
"false"
GroupSettings-OffsetX
=
"400"
>
<
ContentTemplate
>
<
div
class
=
"menuContents"
style
=
"width:200px;"
>
<%--<
asp:HyperLink
runat
=
"server"
ID
=
"hlAdmStatistics"
Text
=
"Statistics"
NavigateUrl
=
"~/admStatistics.aspx"
></
asp:HyperLink
>
<
br
/>--%>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlAdmTranslations"
Text
=
"Translations"
NavigateUrl
=
"~/admTranslations.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlAdmEmails"
Text
=
"Emails"
NavigateUrl
=
"~/admEmails.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlAdmSettings"
Text
=
"General"
NavigateUrl
=
"~/admSettings.aspx"
></
asp:HyperLink
>
</
div
>
</
ContentTemplate
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"Log in"
Value
=
"login"
NavigateUrl
=
"#"
GroupSettings-OffsetX
=
"-24"
PostBack
=
"false"
>
<
ContentTemplate
>
<
asp:Panel
runat
=
"server"
ID
=
"panLogin"
DefaultButton
=
"btnLogin"
CssClass
=
"menuLoginContent"
>
<
table
width
=
"100%"
>
<
tr
>
<
td
style
=
"text-align:left; vertical-align:top"
>
<
h1
><
asp:Label
runat
=
"server"
ID
=
"labNoLoginHeader"
Text
=
"Not a member?"
></
asp:Label
></
h1
>
<
asp:Label
runat
=
"server"
ID
=
"labResellerOnly"
Text
=
"Please note that we only sell to distributors!"
></
asp:Label
>
<
br
/><
br
/>
<
asp:Label
runat
=
"server"
ID
=
"labNoLogin"
Text
=
"If you already are a reseller of our products but need an account"
></
asp:Label
>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlContact"
Text
=
"contact us"
NavigateUrl
=
"~/contact.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:Label
runat
=
"server"
ID
=
"labBecomeReseller"
Text
=
"If you would like to become a reseller "
></
asp:Label
><
asp:HyperLink
runat
=
"server"
ID
=
"hlRegister"
Text
=
"click here to register"
NavigateUrl
=
"~/register.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:Label
runat
=
"server"
ID
=
"labRecoverPassword"
Text
=
"Lost your password? "
></
asp:Label
><
asp:HyperLink
runat
=
"server"
ID
=
"hlRecoverPassword"
Text
=
"click here to recover"
NavigateUrl
=
"~/recoverPassword.aspx"
></
asp:HyperLink
>
</
td
>
<
td
style
=
"text-align:right; vertical-align:top"
>
<
h1
><
asp:Label
runat
=
"server"
ID
=
"labLoginHeader"
Text
=
"Log in"
></
asp:Label
></
h1
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtUsername"
EmptyMessage
=
"Username"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
></
telerik:RadTextBox
>
<
br
/><
br
/>
<
div
id
=
"Password"
style
=
"display:none;"
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtPassword"
ClientEvents-OnBlur
=
"OnBlur"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
TextMode
=
"Password"
></
telerik:RadTextBox
>
</
div
>
<
div
id
=
"PasswordMask"
>
<
telerik:RadTextBox
runat
=
"server"
ID
=
"txtPasswordMask"
EmptyMessage
=
"Password"
ClientEvents-OnFocus
=
"OnFocus"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
></
telerik:RadTextBox
>
</
div
>
<
br
/><
br
/>
<
telerik:RadButton
runat
=
"server"
ID
=
"btnLogin"
Text
=
"log in"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
OnClick
=
"btnLogin_Click"
></
telerik:RadButton
>
</
td
>
</
tr
>
</
table
>
</
asp:Panel
>
</
ContentTemplate
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
runat
=
"server"
Text
=
"[userAccount]"
Value
=
"userAccount"
PostBack
=
"false"
GroupSettings-Flow
=
"Horizontal"
GroupSettings-ExpandDirection
=
"Down"
GroupSettings-OffsetX
=
"700"
>
<
ContentTemplate
>
<
asp:Panel
runat
=
"server"
ID
=
"panActAs"
Visible
=
"false"
Width
=
"100%"
BackColor
=
"#b1ce9b"
>
<
div
Style
=
"padding-left:15px; padding-right:15px; padding-top:10px; padding-bottom:10px;"
>
<
telerik:RadComboBox
AutoPostBack
=
"true"
runat
=
"server"
MarkFirstMatch
=
"true"
ID
=
"cmbActAsCustomers"
Filter
=
"Contains"
Width
=
"100%"
EnableEmbeddedSkins
=
"false"
Skin
=
"mrplant"
ZIndex
=
"9000"
OnSelectedIndexChanged
=
"cmbActAsCustomers_SelectedIndexChanged"
></
telerik:RadComboBox
>
</
div
>
</
asp:Panel
>
<
div
class
=
"menuAccountContent"
>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlAccount"
Text
=
"Account"
NavigateUrl
=
"~/account.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlUsers"
Text
=
"Users"
NavigateUrl
=
"~/users.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlOrderhistory"
Text
=
"Order history"
NavigateUrl
=
"~/orders.aspx"
></
asp:HyperLink
>
<
br
/>
<
asp:HyperLink
runat
=
"server"
ID
=
"hlInvoicehistory"
Text
=
"Invoice history"
NavigateUrl
=
"~/invoices.aspx"
></
asp:HyperLink
>
<
br
/><
br
/>
<
asp:LinkButton
runat
=
"server"
ID
=
"lbLogout"
Text
=
"Logout"
OnClick
=
"lbLogout_Click"
></
asp:LinkButton
>
</
div
>
</
ContentTemplate
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenu
>
Javascript
<telerik:RadCodeBlock runat=
"server"
ID=
"codeblockMenu1"
>
<script src=
"//code.jquery.com/jquery-1.11.1.js"
></script>
<script src=
"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"
></script>
<script type=
"text/javascript"
>
function
clientLoad(sender) {
var
nodeLogin = sender.findItemByValue(
"login"
);
var
nodeAccount = sender.findItemByValue(
"userAccount"
);
//var accountChild = nodeAccount.get_openedItem;
if
(nodeLogin !=
null
) {
nodeLogin.get_element().style.cssText =
"float: right;"
;
}
if
(nodeAccount !=
null
) {
nodeAccount.get_element().style.cssText =
"float: right;"
;
//accountChild.style.cssText = "float: right; position:none;";
}
}
</script>
</telerik:RadCodeBlock>
Menu skin,
.RadMenu_mrplant ul.rmRootGroup,
.RadMenu_mrplant div.rmRootGroup
{
padding
:
0px
0
;
border
:
0px
solid
#ffffff
;
border-bottom
:
5px
solid
#b1ce9b
;
background-color
:
#ffffff
;
margin-bottom
:
-0px
;
}
/* <Root items> */
.RadMenu_mrplant,
.RadMenu_mrplant a.rmLink
{
/*font: normal 9pt/19px "Sans-serif", Verdana;*/
color
:
#000
;
text-decoration
:
none
;
line-height
:
25px
;
padding
:
0px
;
}
.RadMenu_mrplant .rmItem a.rmLink
{
padding
:
0px
22px
;
cursor
:
pointer
;
}
.RadMenu_mrplant .rmHorizontal a.rmLink .rmText
{
padding-right
:
0
;
}
.RadMenu_mrplant a.rmRootLink .rmText
{
padding-left
:
0
;
}
.RadMenu_mrplant ul.rmVertical .rmText
{
padding-right
:
0px
;
}
.RadMenu_mrplant .rmItem a.rmLink:hover,
.RadMenu_mrplant .rmItem a.rmFocused,
.RadMenu_mrplant .rmItem a.rmSelected
{
padding
:
0
22px
;
}
.RadMenu_mrplant .rmItem a.rmExpanded,
.RadMenu_mrplant .rmItem a.rmExpanded:hover
{
padding
:
0
22px
;
}
.RadMenu_mrplant .rmItem a.rmDisabled,
.RadMenu_mrplant .rmItem a.rmDisabled:hover
{
padding
:
0px
22px
;
cursor
:
default
;
color
:
transparent
;
}
/* </Root items> */
/* <Submenu items> */
.RadMenu_mrplant .rmGroup,
.RadMenu_mrplant .rmMultiColumn,
.RadMenu_mrplant .rmGroup .rmVertical
{
background
:
#ffffff
;
}
.RadMenu_mrplant .rmGroup .rmVertical .rmTemplate
{
background
:
none
;
}
.RadMenu_mrplant .rmGroup .rmItem a.rmLink
{
padding
:
0px
;
margin
:
0px
0
;
}
.RadMenu_mrplant .rmGroup .rmItem a.rmLink:hover,
.RadMenu_mrplant .rmGroup .rmItem a.rmFocused,
.RadMenu_mrplant .rmGroup .rmItem a.rmSelected,
.RadMenu_mrplant .rmGroup .rmItem a.rmExpanded,
.RadMenu_mrplant .rmGroup .rmItem a.rmExpanded:hover
{
background
:
#fff
;
padding
:
0
;
}
div.RadMenu_mrplant .rmItem .rmLink:hover
/*överliggande flik, när man hovrar*/
{
background-color
:
rgb
(
255
,
255
,
255
);
}
div.RadMenu_mrplant .rmItem .rmLink .rmExpandDown
{
border-color
:
rgb
(
255
,
255
,
255
);
}
div.RadMenu_mrplant .rmItem .rmExpanded
/*överliggande flik, när den är expanderad*/
{
background
:
#b1ce9b
;
}
div.RadMenu_mrplant .rmItem .rmExpanded .rmText
{
background
:
#b1ce9b
;
}
div.RadMenu_mrplant .rmItem .rmExpanded:hover
{
background
:
#b1ce9b
;
}
.RadMenu .rmGroup
/*verkar vara underliggande itemtemplates*/
{
background-image
:
none
!important
;
text-align
:
left
!Important;
padding-left
:
8px
!Important;
margin-left
:
2px
!Important;
padding-right
:
8px
!important
;
margin-right
:
2px
!Important;
border
:
3px
solid
#f6f6f6
;
-moz-border-bottom-right-radius:
10px
;
-moz-border-bottom-left-radius:
10px
;
border-bottom-left-radius:
10px
;
border-bottom-right-radius:
10px
;
}
.RadMenu .rmGroup .rmLink .rmText
{
text-align
:
left
!Important;
padding-left
:
0px
!Important;
margin-left
:
2px
!Important;
padding-right
:
0px
!Important;
margin-right
:
2px
!Important;
background-color
:
transparent
;
}
.RadMenu .rmGroup .rmItem
{
text-align
:
left
!Important;
padding-left
:
0px
!Important;
margin-left
:
2px
!Important;
padding-right
:
0px
!Important;
margin-right
:
2px
!Important;
border
:
none
;
}
.RadMenu .rmTemplate .rmGroup
{
background
:
none
;
background-color
:
none
;
border
:
0px
;
padding
:
0px
;
}
div.RadMenu .alignR .rmText
{
text-align
:
right
!Important;
float
:
right
!important
;
padding-right
:
0px
!important
;
margin-right
:
2px
!Important;
padding-left
:
0px
!Important;
margin-left
:
2px
!Important;
}
.RadMenu .rmItem {
position
:
static
!important
;
}
Input skin,
/*global*/
.RadInput_mrplant,
.RadInputMgr_mrplant
{
font
:
14px
"segoe ui"
,
arial
,
sans-serif
;
}
/*textbox states*/
html body .RadInput_mrplant .riTextBox,
html body .RadInputMgr_mrplant
{
border-color
:
#8e8e8e
#b8b8b8
#b8b8b8
#8e8e8e
;
background
:
#fff
;
color
:
#333333
;
font
:
14px
"segoe ui"
,
arial
,
sans-serif
;
height
:
30px
;
}
html body .RadInput_mrplant .riEmpty,
html body .RadInput_Empty_mrplant {
color
:
#a5a5a5
; }
html body .RadInput_mrplant .riHover,
html body .RadInput_Hover_mrplant,
html body .RadInput_mrplant .riFocused,
html body .RadInput_Focused_mrplant {
border-color
:
#b1ce9b
!important
;
color
:
#333333
; }
html body .RadInput_mrplant .riRead,
html body .RadInput_Read_mrplant {
border-color
:
#d0d0d0
; }
html body .RadInput_mrplant .riDisabled,
html body .RadInput_Disabled_mrplant {
border-color
:
#d0d0d0
;
color
:
#8a8a8a
;
cursor
: Default; }
html body .RadInput_mrplant .riError,
html body .RadInput_Error_mrplant {
border-color
:
#d51923
;
background
:
white
100%
-298px
no-repeat
url
(
'Input/sprite.gif'
);
color
:
#d51923
; }
.RadForm.rfdTextbox .RadInput_mrplant .riError[type=
"text"
],
.RadForm.rfdTextbox .RadInput_Error_mrplant[type=
"text"
] {
border-color
:
#d51923
;
background
:
white
100%
-298px
no-repeat
url
(
'Input/sprite.gif'
);
color
:
#d51923
; }
html body .RadInput_mrplant .riNegative,
html body .RadInput_Negative_mrplant {
color
:
#565656
; }
.RadInput_mrplant a {
background
:
transparent
no-repeat
url
(
'Input/sprite.gif'
); }
.RadInput_mrplant .riBtn a {
width
:
20px
;
height
:
18px
;
line-height
:
18px
;
background-position
:
3px
5px
; }
.RadInput_mrplant .riBtn a:hover {
background-position
:
3px
-45px
; }
.RadInput_mrplant .riSpin a {
width
:
15px
;
height
:
7px
;
line-height
:
7px
; }
.RadInput_mrplant a.riUp {
background-position
:
4px
-98px
; }
.RadInput_mrplant a.riUp:hover {
background-position
:
4px
-148px
; }
.RadInput_mrplant a.riDown {
background-position
:
4px
-199px
; }
.RadInput_mrplant a.riDown:hover {
background-position
:
4px
-249px
; }
.RadInput_mrplant .riLabel {
color
:
#000
; }
.RadInput_mrplant .riResizeIcon {
background
:
url
(
'Common/radActionsSprite.png'
)
no-repeat
transparent
;
background-position
:
-6.5px
-966.5px
;
margin-bottom
:
-1px
; }
html body .RadInputRTL_mrplant .riError,
html body .RadInputRTL_Error_mrplant {
background-position
:
3px
-298px
; }
html body .RadInputRTL_mrplant .riResizeIcon {
background-position
:
-6.5px
-986.5px
; }
.RadForm.rfdTextbox .RadInputRTL_mrplant .riError[type=
"text"
],
.RadForm.rfdTextbox .RadInputRTL_Error_mrplant[type=
"text"
] {
background-position
:
3px
-298px
; }
Any help to get this working on mobile devices is very appreciated! cant figure out what I´m doing wrong and im starting to think Im either missing something obvious or there is an internal telerik bug.
two separate issues, cant click on input boxes inside the template (except for password field seems to be working for some reason) and the second issue is the sitemap navigationurl does not work. all tested on ipad safari and Android tablet.
I was able to reproduce the issues on my side as well.
The issue with not being able to click on a link inside a RadMenuItem ContentTemplate is a known one. It has already been fixed and will be included in the Q2 2015 SP1 release. In addition, the fix also prevents the RadMenu collapsing on tapping over the link or the textbox.
However, the second issue - Unable to type in a textbox nested in RadMenuItem ContentTemplate on iOS and Android , is still not fixed. I have logged it for fixing. You may use its public Ideas & Feedback Portal item to track its status, vote for it and add comments.
Regards,
Dimitar
Telerik
Appreciate the feedback Dimitar, eagerly awaiting next release and a fix for the input box issue.
Christian