Editing Buttons Not Visible On Android And Ipad Devices — an archived discussion from the APG vNext support community.
About This Topic
This thread covers editing buttons not visible on android and ipad devices in the context of APG vNext, the ASP.NET forum and community platform. The community includes APG developers and experienced administrators who can help with similar questions.
APG vNext Support
- Knowledge Base — documented solutions
- FAQ — frequently asked questions
- Installation Guide
- Upgrade Guide
- Support Forum
Post Editor Buttons Not Visible on Android and iPad in APG vNext
APG vNext's rich text editor toolbar buttons (Bold, Italic, Insert Image, etc.) can disappear or become non-functional on Android Chrome and iOS Safari. This is almost always caused by touch event handling issues, an editor library incompatibility with mobile WebKit, or a CSS overflow problem hiding the toolbar behind the editor content area.
Diagnosing the Issue
- Toolbar invisible: CSS overflow or z-index issue hiding the toolbar
- Toolbar visible but buttons don't respond: touch events not wired up, or the editor library doesn't support touch
- Editor crashes on mobile keyboard open: viewport resize causes editor height calculation failure
Fix 1: Ensure Toolbar is Not Hidden by Overflow
.apg-editor-container {
overflow: visible !important; /* don't clip the toolbar */
position: relative;
}
.apg-editor-toolbar {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
}Fix 2: Switch to the Mobile-Optimised Editor
<!-- web.config: use simplified mobile editor on small screens -->
<add key="APG.Editor.MobileMode" value="Simplified" />
<add key="APG.Editor.MobileBreakpointPx" value="768" />
<!-- Simplified mode shows only: Bold, Italic, Link, Image, Quote -->Fix 3: Use the Plain Text Fallback
For Android devices where the rich text editor is consistently broken, enable automatic fallback to the plain text editor:
<add key="APG.Editor.MobileFallback" value="PlainText" />Testing Editor Functionality Across Mobile Browsers
Mobile browser compatibility for rich text editors varies significantly between iOS Safari, Android Chrome, Android Firefox, and Samsung Internet. Create a test matrix covering at least three devices and two operating system versions for the most common mobile browsers your community uses. Test each editor action in the matrix: text formatting (bold, italic, underline), inserting links, inserting images, code blocks, and the quote function. Document which combinations work and which don't, then use the APG vNext mobile editor configuration to enable fallback modes only for the specific browsers where issues occur, rather than degrading the experience for all mobile users.
Using BrowserStack or Device Farm for Mobile Testing
For thorough mobile editor testing without owning multiple physical devices, use a cloud device farm service like BrowserStack or AWS Device Farm. These services provide remote access to real mobile devices running specific OS versions, allowing you to test the APG vNext editor on iPhone SE with iOS 16, Samsung Galaxy S21 with Android 12, and iPad Pro with iPadOS 15 simultaneously. This is particularly valuable for reproducing user-reported issues that appear only on specific device and OS combinations that you don't have physical access to.
Reporting Mobile Editor Bugs to the APG vNext Team
When reporting a mobile editor bug to the APG vNext support team, include the following information for the fastest resolution: the device model and OS version, the browser name and version, the specific action that is failing (e.g., bold button not responding when text is selected), a screenshot or screen recording of the issue, and the APG vNext version you are running. Without the device and OS information, reproducing the issue is significantly more difficult and may require multiple back-and-forth exchanges. Including a short screen recording using iOS's built-in screen recording or an Android screen recorder eliminates ambiguity about what exactly is failing and in which sequence.
iPad Stylus and External Keyboard Support in the Editor
iPad users with an Apple Pencil or external keyboard have specific expectations for the APG vNext post editor. The Apple Pencil should trigger the same text insertion behaviour as a finger tap. External keyboards on iPad expect standard keyboard shortcuts (Cmd+B for bold, Cmd+I for italic, Cmd+K for insert link) to work within the editor. APG vNext 5.x includes iPadOS Keyboard Shortcut support for the post editor out of the box. If keyboard shortcuts are not working after upgrading, verify that the editor JavaScript is loading correctly by checking the browser console for errors — a JavaScript error in the editor initialisation can silently prevent keyboard shortcut handlers from being registered.
Progressive Enhancement for Mobile Editor
APG vNext's mobile editor implementation follows a progressive enhancement approach: the core text input and form submission work with just HTML, without any JavaScript. The rich text formatting toolbar is added by JavaScript on top of this base experience. This means that if the rich text editor JavaScript fails to load on a specific mobile browser, the member can still post plain text using the base HTML form — they simply lose access to formatting controls. This fallback is intentional and ensures that forum posting remains functional even on unusual or restricted mobile browsers that block certain JavaScript APIs used by the rich text editor toolbar.
Related Resources
Looking for more help? Browse the support forum or check the Knowledge Base.