Nav Menu stuck open for iPad user

  • 2
  • Problem
  • Updated 2 months ago
  • In Progress
After an upgrade from 8.15.15 to 10.0.21 we have an iPad user (iOS 11.2) reporting that after opening a Nav component menu, the menu stays open blocking the screen. Clicking elsewhere does not remove the menu. The only workaround we've found is reloading the page.

This issue appears to be isolated to the iPad, not other tablets or any desktop that we've tested.



This same user is the one reporting the Case of the Jumping Cursor.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 7 months ago

  • 2
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Hi Matt,

I created a test page in our DEV org running Millau 11.1.8. I am using a Dropdown Nav and it works as expected on my iPad (iOS 11.3). Now the question portion of the show.
  • Did you update the themes after upgrading to 10.0.21?
  • Can I get more details on how your Navigation component is configured?
Let's start with those.

Apologies for taking so long to get back with you.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Themes are up to date.
My nav  is a custom component which builds a skuid nav component based on salesforce data.

Here's the runtime js:
(function(skuid){
    
    var $ = skuid.$,
        $u = skuid.utils,
        $xml = $u.makeXMLDoc,
        $uid = $u.generateUniqueId,
        $e = skuid.events.subscribe,
        mm = skuid.model.Model;
    //Helper function to generate random string if script label or signature type isn't available
    var randomString = function(length) {
        var result = '',
            chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        for (var i = length; i > 0; i--) result += chars[Math.floor(Math.random() * chars.length)];
        return result;
    },
        removeSpaces = function(text){
        return text.split(' ').join('');
    },
    //Staff and User Info
        getCurrentSession = function(){
        var model = skuid.$M('CurrentStaffSession'),
            row = model && model.getFirstRow();
        return row;    
    },
        getCurrentStaff = function(session){
        return session && session.Staff__c;
    },
        getCurrentProfile = function(session){
        return session && session.Staff__c && session.Staff__r.Profile__c;
    },
        getCurrentStaffName = function(session){
        return session && session.Staff__c && session.Staff__r.Name;
    },
        getUserProfile = function(){
            var model = skuid.$M('CurrentUser'),
                row = model && model.getFirstRow();
        return row && row.Optimize_Profile_Type__c;
    };
    skuid.componentType.register('ccoptimize__nav',function (element,xmlDef,component){
        // Get properties and variables
        var navCode = xmlDef.attr('code'),
            navName = xmlDef.attr('nav'),
            navRBP = xmlDef.attr('responsivebreakpoint'),
            navAlt = xmlDef.attr('alternateformat'),
            navLabel = 'Navigation_' + removeSpaces(navName),
            navModelId = (navLabel) ? navLabel.replace(/[^A-Z0-9\_]+/ig, "") : 'Navigation_' + randomString(4),
            staffId, staffProfile, navMenuModel, navCustomModel;
        var getStaff = function(){
            var staffSession = getCurrentSession();
            staffId = getCurrentStaff(staffSession);
            staffProfile = getCurrentProfile(staffSession);
            return staffId;
        };
        var getNavVisibility = function(){
            var dfd = new $.Deferred(),
                model = new mm();
            model.objectName = 'Navigation_Menu_Set__c';
            model.id = removeSpaces(navCode)+'Model';
            model.recordsLimit = 1;
            model.fields = [
                { id: 'Optimize_Code__c'},
                { id: 'Id'},
                { id: 'Profile_Visibility__c'},
                { id: 'Name'}
            ];
            model.conditions = [
                {
                    type: 'fieldvalue',
                    field: 'Optimize_Code__c',
                    operator: '=',
                    value: navCode,
                    encloseValueInQuotes: true
                }
            ];
            $.when(model.initialize().load()).done(function(){
                var row = model.getFirstRow();
                if (row){
                    dfd.resolve(row.Profile_Visibility__c);
                } else {
                    dfd.reject();
                }
            }).fail(function(result){
                console.error('Dynamic model query failed: ' + result.error);
                dfd.reject(result.error);
            });
            return dfd.promise();
        };
        // Function to include legacy menu if no custom navigation available
        var includeLegacyMenuPage = function(){
            element.empty();
            var xmlPageInclude = $xml('<includepanel type="skuid" uniqueid="'+$uid()+'" pagename="LegacyNavigationMenu"/>');
            var includeContainer = $('<div id='+$uid()+'>');
            skuid.component.factory({
                xmlDefinition: xmlPageInclude,
                element: includeContainer
            });
            // Add components to the DOM element
            element.append(includeContainer);
        };

        // Generate Nav Menu Model
        var buildNavMenuModels = function(){
            var dfd = new $.Deferred();
            //Customizations Model
            navCustomModel = new mm();
            navCustomModel.objectName = 'Navigation_Customization__c';
            navCustomModel.id = 'NavCustomizations';
            navCustomModel.fields = [
                { id: 'Id'},
                { id: 'Name'},
                { id: 'Navigation_Menu__c'},
                { id: 'Navigation_Menu__r.Item__c'},
                { id: 'Navigation_Menu__r.Item__r.Icon__c'},
                { id: 'Navigation_Menu__r.Item__r.Name'},
                { id: 'Navigation_Menu__r.Item__r.Open_URL_In__c'},
                { id: 'Navigation_Menu__r.Item__r.URL__c'},
                { id: 'Navigation_Menu__r.Name'},
                { id: 'Navigation_Menu__r.Navigation_Menu_Set__c'},
                { id: 'Navigation_Menu__r.Navigation_Menu_Set__r.Name'},
                { id: 'Navigation_Menu__r.Navigation_Menu_Set__r.Optimize_Code__c'},
                { id: 'Navigation_Menu__r.Order__c'},
                { id: 'Navigation_Menu__r.Parent_Menu__c'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Item__c'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Item__r.Name'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Name'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Order__c'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Parent_Menu__c'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Parent_Menu__r.Item__c'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Parent_Menu__r.Item__r.Name'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Parent_Menu__r.Name'},
                { id: 'Navigation_Menu__r.Parent_Menu__r.Parent_Menu__r.Order__c'},
                { id: 'Staff__c'},
                { id: 'Staff__r.Name'},
                { id: 'Visible__c'}
            ];
            navCustomModel.conditions = [
                {
                    type: 'fieldvalue',
                    field: 'Navigation_Menu__r.Navigation_Menu_Set__r.Optimize_Code__c',
                    operator: '=',
                    value: navCode,
                    encloseValueInQuotes: true
                },
                {
                    type: 'fieldvalue',
                    field: 'Staff__c',
                    operator: '=',
                    value: staffId,
                    encloseValueInQuotes: true
                }
            ];
            navCustomModel.initialize().register();
            //Defaults Model
            navMenuModel = new mm();
            navMenuModel.objectName = 'Navigation_Menu__c';
            navMenuModel.id = navModelId;
            navMenuModel.dataSourceTypeName = 'salesforce';
            navMenuModel.orderByClause = "Parent_Menu__c NULLS FIRST, Order__c";
            navMenuModel.fields = [
                { id: 'Default_Profile_Visibility__c'},
                { id: 'Id'},
                { id: 'Item__c'},
                { id: 'Item__r.Icon__c'},
                { id: 'Item__r.Name'},
                { id: 'Item__r.Open_URL_In__c'},
                { id: 'Item__r.URL__c'},
                { id: 'Name'},
                { id: 'Navigation_Menu_Set__c'},
                { id: 'Navigation_Menu_Set__r.Name'},
                { id: 'Navigation_Menu_Set__r.Optimize_Code__c'},
                { id: 'Order__c'},
                { id: 'Parent_Menu__c'},
                { id: 'Parent_Menu__r.Item__c'},
                { id: 'Parent_Menu__r.Item__r.Name'},
                { id: 'Parent_Menu__r.Name'},
                { id: 'Parent_Menu__r.Order__c'},
                { id: 'Parent_Menu__r.Parent_Menu__c'},
                { id: 'Parent_Menu__r.Parent_Menu__r.Name'},
                { id: 'Parent_Menu__r.Parent_Menu__r.Order__c'},
                { id: 'Parent_Menu__r.Parent_Menu__r.Item__c'},
                { id: 'Parent_Menu__r.Parent_Menu__r.Item__r.Name'}
            ];
            navMenuModel.conditions = [
                {
                    type: 'fieldvalue',
                    field: 'Navigation_Menu_Set__r.Optimize_Code__c',
                    operator: '=',
                    value: navCode,
                    encloseValueInQuotes: true
                },
                {
                    type: 'fieldvalue',
                    field: 'Default_Profile_Visibility__c',
                    operator: 'includes',
                    value: staffProfile,
                    encloseValueInQuotes: true
                }
            ];
            navMenuModel.initialize().register();
            $.when(mm.load([navCustomModel,navMenuModel])).done(function(){
                dfd.resolve();
            }).fail(function(result){
                console.error('Dynamic Nav Customizations model query failed: ' + result.error);
                dfd.reject(result.error);
            });
            return dfd.promise();
        };
        var mergeMenus = function(){
            var menuRows = navMenuModel.getRows(),
                rowsToAdopt = [];
            $.each(navCustomModel.getRows(),function(n,customRow){
                var found = false, i = 0;
                while (!found && i<menuRows.length){
                    if (menuRows[i].Id === customRow.Navigation_Menu__c){
                        if (customRow.Visible__c === "Off"){
                            navMenuModel.abandonRow(menuRows[i]);
                        }
                        found = true;
                    } else i++;
                }
                if (!found && customRow.Visible__c === "On"){
                    var cr = customRow.Navigation_Menu__r;
                    rowsToAdopt.push({
                        'Id':customRow.Navigation_Menu__c,
                        'Name':cr.Name,
                        'Item__c':cr.Item__c,
                        'Item__r':cr.Item__r,
                        'Navigation_Menu_Set__c':cr.Navigation_Menu_Set__c,
                        'Navigation_Menu_Set__r':cr.Navigation_Menu_Set__r,
                        'Order__c':cr.Order__c,
                        'Parent_Menu__c':cr.Parent_Menu__c,
                        'Parent_Menu__r':cr.Parent_Menu__r
                    });
                }
            });
            if (rowsToAdopt.length) navMenuModel.adoptRows(rowsToAdopt);
        };
        var renderMenus = function(){
            mergeMenus();
            var menu = {}, menuOrder = {}, usedRows = [];
            // Get Top Menu
            $.each(navMenuModel.getRows(),function(){
                if (!this.Parent_Menu__c && this.Item__c) {
                    // Menu Id
                    menu[this.Id] = {
                        label: this.Item__r.Name,
                        order: this.Order__c,
                        url: this.Item__r.URL__c,
                        target: this.Item__r.Open_URL_In__c,
                        icon: this.Item__r.Icon__c,
                        kids: {}
                    };
                    // Ordered Menu
                    menuOrder[this.Order__c] = {
                        label: this.Item__r.Name,
                        url: this.Item__r.URL__c,
                        target: this.Item__r.Open_URL_In__c,
                        icon: this.Item__r.Icon__c,
                        kids: {}
                    };
                    usedRows.push(this);
                }
            });
            navMenuModel.abandonRows(usedRows);
            usedRows = [];
            //Get Secondary Menu
            $.each(navMenuModel.getRows(),function(){
                if (this.Parent_Menu__c && menu[this.Parent_Menu__c] && this.Item__c) {
                    // Menu
                    menu[this.Parent_Menu__c].kids[this.Id] = {
                        label: this.Item__r.Name,
                        order: this.Order__c,
                        url: this.Item__r.URL__c,
                        target: this.Item__r.Open_URL_In__c,
                        icon: this.Item__r.Icon__c,
                        kids: {}
                    };
                    // Ordered Menu
                    menuOrder[this.Parent_Menu__r.Order__c].kids[this.Order__c] = {
                        label: this.Item__r.Name,
                        url: this.Item__r.URL__c,
                        target: this.Item__r.Open_URL_In__c,
                        icon: this.Item__r.Icon__c,
                        kids: {}
                    };
                    usedRows.push(this);
                }
            });
            navMenuModel.abandonRows(usedRows);
            usedRows = [];
            //Get Tertiary Menus
            $.each(navMenuModel.getRows(),function(){
                if (this.Parent_Menu__c && this.Parent_Menu__r.Parent_Menu__c && this.Item__c && 
                    menu[this.Parent_Menu__r.Parent_Menu__c] && 
                    menu[this.Parent_Menu__r.Parent_Menu__c].kids[this.Parent_Menu__c]
                    ) {
                    // Menu Id
                    menu[this.Parent_Menu__r.Parent_Menu__c].kids[this.Parent_Menu__c].kids[this.Id] = {
                        label: this.Item__r.Name,
                        order: this.Order__c,
                        url: this.Item__r.URL__c,
                        target: this.Item__r.Open_URL_In__c,
                        icon: this.Item__r.Icon__c
                    };
                    // Ordered Menu
                    menuOrder[this.Parent_Menu__r.Parent_Menu__r.Order__c].kids[this.Parent_Menu__r.Order__c].kids[this.Order__c] = {
                        label: this.Item__r.Name,
                        url: this.Item__r.URL__c,
                        target: this.Item__r.Open_URL_In__c,
                        icon: this.Item__r.Icon__c
                    };
                    usedRows.push(this);
                }
            });
            navMenuModel.abandonRows(usedRows);
            var xmlItems = [];
            $.each(menuOrder,function(i,m){
                var actionXML = m.url ? 
                    $xml('<actions/>').append(
                        $xml('<action type="redirect" window="'+m.target+'" url="'+m.url+'"/>')
                        ) : 
                    $xml('<actions/>');
                // Get Children
                var kids = [];
                $.each(m.kids, function(i,s) {
                    var sActionXML = s.url ? 
                        $xml('<actions/>').append(
                            $xml('<action type="redirect" window="'+s.target+'" url="'+s.url+'"/>')
                            ) : 
                        $xml('<actions/>');
                    
                    // Get Grandchildren
                    var grandkids = [];
                    $.each(s.kids, function(i,t) {
                        var tActionXML = t.url ? 
                            $xml('<actions/>').append(
                                $xml('<action type="redirect" window="'+t.target+'" url="'+t.url+'"/>')
                                ) : 
                            $xml('<actions/>');
                        grandkids.push($xml('<navigationitem label="'+$u.encodeHTML(t.label)+'"'+ (t.icon ? ' icon="'+t.icon+'"' : '') +'/>').append(tActionXML));
                    });
                    kids.push($xml('<navigationitem label="'+$u.encodeHTML(s.label)+'"'+ (s.icon ? ' icon="'+s.icon+'"' : '') +'/>').append(
                        sActionXML,
                        $xml('<navigationitems/>').append(grandkids)
                        )
                    );
                });
                xmlItems.push($xml('<navigationitem label="'+$u.encodeHTML(m.label)+'"'+ (m.icon ? ' icon="'+m.icon+'"' : '') +'/>').append(
                    actionXML,
                    $xml('<navigationitems/>').append(kids)
                    )
                );
            });
            // Define XML for our child components
            var xmlNavigation = $xml('<navigation uniqueid="'+navLabel+'" responsivebreakpoint="'+navRBP+'" alternateformat="'+navAlt+'" overflowtomenu="false"/>').append(
                $xml('<navigationitems/>').append(xmlItems)
                );
            // Make containers for our components
            var container = $('<div id='+$uid()+'>');
            skuid.component.factory({
                xmlDefinition: xmlNavigation,
                element: container
            });
            // Add components to the DOM element
            element.append(container);
        };
        // Generate Component
        var generateNavComponent = function(){
            //Load models
            $.when(buildNavMenuModels()).then(function(){
                if(navMenuModel.getRows().length || navCustomModel.getRows().length) {
                    renderMenus();
                } else {  // If no custom menus are avaialble, render the legacy menu
                    includeLegacyMenuPage();
                }
                
            });
        };
        var checkProfileAndGenerate = function(){
            $.when(getNavVisibility()).done(function(visibility){
               if (visibility && visibility.indexOf(staffProfile)>-1) generateNavComponent();
            }).fail(function(result){
                console.log(result);
                return false;
            });
        };
        staffId = getStaff();
        // If the Current Staff is set, generate the custom navigation
        if (staffId) {
            checkProfileAndGenerate();
        }
        // Subscribe to staff change event to generate component after staff selection
        $e('staffSelected',function(){ 
            staffId = getStaff();
            if (staffId) {
                checkProfileAndGenerate();
                skuid.events.unsubscribe('staffSelected');
            }
        });
        
        //Add to component definition
        component.buildModel = buildNavMenuModels;
        component.renderMenus = renderMenus;
        component.generateComponent = generateNavComponent;
        component.revertToLegacyMenu = includeLegacyMenuPage;
        component.render = checkProfileAndGenerate;
    });
})(skuid);
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
And here's the builder-side js:

(function(skuid) {
    // Global shortcuts & variables
    var $ = skuid.$,
        $xml = skuid.utils.makeXMLDoc,
        b = skuid.builder,
        c = b.core;
//Custom Navigation Component
    c.registerBuilder(new c.Builder({
        id: "ccoptimize__nav",
        name: "Custom Navigation",
        icon: "sk-icon-share",
        description: "Inserts a Custom Navigation Component based on the Staff or Profile",
        isJSCreateable: true,
        componentRenderer : function (component) {
            // Set title
            component.setTitle(component.builder.name);
            // Shortcuts
            var state = component.state;
            // Script name property
            var navName = state.attr('nav');
            // Build containers and contents
            var builderText = 'The Custom Navigation Component creates a Skuid Navigation component based on the configuration found in the ' +
                            '<a href="/apex/skuid__ui?page=NavMenuSettings" taarget="_blank">Navigation Menu Settings</a>.';
            var div = $('<div>').html(builderText);
            
            // Add contents to DOM
            component.body.append(div); 
        },
        propertiesRenderer : function (propertiesObj, component) {
            propertiesObj.setTitle("Custom Navigation Component Properties");
            var state = component.state;
            var propCategories = [];
            var basicPropsList = [
                {
                    id : 'navset',
                    type : 'autocomplete',
                    sobject : 'Navigation_Menu_Set__c',
                    fieldsToReturn : ['Name', 'Optimize_Code__c', 'Id'],
                    fieldsToSearch : ['Name', 'Optimize_Code__c'],
                    displayTemplate : '{{Name}} ({{Optimize_Code__c}})',
                    valueTemplates : {
                            'nav' : '{{Name}}',
                            'code' : '{{Optimize_Code__c}}'
                    },
                    order : 'Name',
                    label : 'Navigation Set (autocomplete)',
                    required : true,
                    onChange : function() {
                            component.refresh();
                    }
                },
                {
                    id: "responsivebreakpoint",
                    type: "picklist",
                    label: "Screen Size to Change Format",
                    location: "attribute",
                    picklistEntries: [
                        {label: 'Never', value: ''},
                        {label: 'Tablets and smaller', value: 'medium'},
                        {label: 'Phones', value: 'small'}
                    ],
                    onChange: function(){
                        component.rebuildProps();
                    }
                }
            ];
            if (state.attr('responsivebreakpoint')) basicPropsList.push({
                    id: "alternateformat",
                    type: "picklist",
                    label: "Alternate Format",
                    location: "attribute",
                    picklistEntries: [
                        {label: 'Collapse to menu', value: 'collapse'},
                        {label: 'Wrap centered', value: 'wrap'}
                    ]
            });
            var advancedPropsList = [
                c.coreProps.uniqueIdProp({component: component}),
                b.cssClassProp
            ];
            propCategories.push(
                {
                    name: "Basic",
                    props: basicPropsList,
                },
                {
                    name: "Advanced",
                    props: advancedPropsList
                },
                c.getRenderingCategory({
                    component: component,
                    model: null,
                    propViewer: propertiesObj
                })
            );
            if(skuid.mobile) propCategories.push({ name : "Remove", props : [{ type : "remove" }] });
            propertiesObj.applyPropsWithCategories(propCategories,state);
        },
        defaultStateGenerator : function() {
            return skuid.utils.makeXMLDoc('<ccoptimize__nav/>');
        }
    }));
})(skuid);
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Hi Matt,

This quickly exited my level of expertise. There was a big jump in Skuid versions and feel it would be difficult to easily identify the change(s) that are affecting your custom component. 

That said, a co-worker of mine asked if your component is only listening for an onclick event, or something that tapping on a screen doesn't trigger?

Couple options:

- Give the Skuid Community time to weigh in.
- Contact your Customer Success Rep to discuss options on getting more targeted expertise.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Matthew-- Don't give up so easily!

The fact that I'm using a custom component may be irrelevant, since I all my component is doing is dynamically creating a skuid nav component on pageload based on salesforce data. My component doesn't change anything at all about the way the standard skuid nav component works.

I don't have an iPad handy or I would test it myself.

The user has upgraded their iPad to 11.3. Can you test Nav functionality on an iPad with a 10.0.21 org?

I'm wondering if the issue has something to do with the theme? Is there a good way I can pass a theme file to you?
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Ok, I'll bite. Let me see if there is anything I can do on my end. No promises.

Can you add your theme to Dropbox and post the link?

Can the users try a cloned page with a standard theme using iPad? Had to ask.
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Were you able to get where you were headed? Or still stuck.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Still stuck... moved the user to a different theme (skuid's stock Modern theme), but the menus are still sticking.

I'll try to get you my theme tomorrow, but that doesn't seem to be the problem...
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
ok. I'll keep an eye out for it. I did spin up a dev org with Brooklyn 10.0.21. At least have the same environment set up for testing.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Got it! Thanks Matt.
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Confirmed your theme is not the issue. Are you able to send me a component pack? Could it be adjusted to work in my org? We've gone this far, so open to ideas.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Experiencing something similar. The Nav component dropdown when on mobile is semi stuck. You have to tap somewhere else on screen for the dropdown to go away.

This is on latest version of Android. 8.1.0
(Edited)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
No. Upon tapping on it. Selecting an item should also close the drop down.
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Ok, I got it now. Thanks.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Have you been able to reproduce?
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Pat, what device ae you using? I noticed you mentioned Android. Does the issue only rear it’s head on Android, or desktop as well. You on latest Skuid version?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
This is on Android. Haven't tested with iPhone.

Desktop works fine. Moving mouse pointer to hover on anything else makes the dropdown hide.
Photo of Gary Bailey

Gary Bailey

  • 1,628 Points 1k badge 2x thumb
Has anyone figured this out? My users are experiencing similar issues on the ipad.   I've upgraded to the current release and have updated all themes.  Here is a screen shot:


Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
Hi Gary,

Are you building mobile only or is this a desktop shared app?
Photo of Gary Bailey

Gary Bailey

  • 1,628 Points 1k badge 2x thumb
This is a desktop shared app.  It's mobile friendly though (or was ).  I should point out that the menu worked fine for almost a year until it didn't.
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
Hi Gary

Some questions.

1. What release of Skuid are you on?
2. What version of Salesforce are you on?
3. Do you have any custom CSS in any parts of your page?
4. What iPad with which iOS are you using?
5. Are you using any JS in the page that addresses a DOM element or Skuid component or updates any data that may be connected to the menu?