Skip to content

Commit 7bae499

Browse files
github-actions[bot]KB Bot
andauthored
Added new kb article textbox-touch-responsiveness-radpanelbar-ipad (#624)
Co-authored-by: KB Bot <[email protected]>
1 parent 8ba00d8 commit 7bae499

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Resolving Touch Responsiveness of TextBoxes in RadPanelBar on iPad
3+
description: Learn how to fix the issue where TextBox controls inside a RadPanelBar do not respond to touch events on an iPad.
4+
type: troubleshooting
5+
page_title: How to Make TextBox Controls Responsive to Touch Inside RadPanelBar on iPad Devices
6+
slug: textbox-touch-responsiveness-radpanelbar-ipad
7+
tags: radpanelbar, asp.net ajax, touch events, ipad, radtextbox, javascript
8+
res_type: kb
9+
ticketid: 1668915
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadPanelBar for ASP.NET AJAX</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>all</td>
23+
</tr>
24+
</table>
25+
26+
## Description
27+
28+
When viewing a web page on Safari (iPad, iPhone), `RadTextBox` controls placed inside a [RadPanelBar](https://docs.telerik.com/devtools/aspnet-ajax/controls/panelbar/overview) do not respond to touch events — specifically, the keyboard does not appear. However, the text boxes work as expected when placed outside the RadPanelBar.
29+
30+
## Cause
31+
32+
The issue stems from the way touch interactions are managed within Telerik controls, particularly how the touch scroll extender in the RadPanelBar interferes with touch events on iOS devices.
33+
34+
## Solution
35+
36+
Disable the touch scroll extender for the RadPanelBar when the page loads. This action allows the `RadTextBox` controls within the RadPanelBar to respond normally to touch events on iOS devices. Use the following JavaScript snippet in your page:
37+
38+
```javascript
39+
<script>
40+
function OnClientLoad(sender, args) {
41+
if (Telerik.Web.Browser.safari && Telerik.Web.Platform.ios && sender._touchScrollExtender) {
42+
sender._touchScrollExtender.disable();
43+
}
44+
}
45+
</script>
46+
```
47+
48+
And add the `OnClientLoad` event to your `RadPanelBar` control:
49+
50+
```aspnet
51+
<telerik:RadPanelBar ID="FindRadPanelBar" runat="server" OnClientLoad="OnClientLoad" ExpandMode="SingleExpandedItem" Width="100%">
52+
<!-- PanelBar content here -->
53+
</telerik:RadPanelBar>
54+
```
55+
56+
This solution specifically targets iOS devices to ensure that `RadTextBox` controls within the `RadPanelBar` become responsive to touch events, making them usable on devices like iPads.
57+
58+
## See Also
59+
60+
- [RadPanelBar Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/panelbar/overview)
61+
- [RadTextBox Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/textbox/overview)

0 commit comments

Comments
 (0)