Dropdown Navigation on Edge and IE on a touchscreen

Options
Pat Sebree
Pat Sebree ✭
Ninth Anniversary Photogenic First Reply
in Blackbaud Raiser's Edge NXT®: General Discussion
I am working on a responsive version of World Gospel Mission's website and discovered in testing that our dropdown CSS navigation doesn't work in Microsoft Edge and Microsoft Explorer on a Windows touchscreen (I am testing on a Surface with Windows 10). I have searched online for more information about this, but have not found a solution. Has anyone else found a solution for this? The page I am working with is http://wgm.org/r-home
Tagged:

Comments

  • Chris McGrane
    Chris McGrane ✭
    Tenth Anniversary Facilitator 2 Photogenic

    Pat Sebree:
    I am working on a responsive version of World Gospel Mission's website and discovered in testing that our dropdown CSS navigation doesn't work in Microsoft Edge and Microsoft Explorer on a Windows touchscreen (I am testing on a Surface with Windows 10). I have searched online for more information about this, but have not found a solution. Has anyone else found a solution for this? The page I am working with is http://wgm.org/r-home

    Touch actions often times are webkit specific if they are using the Touch API. For Edge or MS browsers, the element that activates the menu may need the following CSS property:

      

    <span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">-</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">ms</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">-</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">touch</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">-</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">action</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">:</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);"> none</span><span style="margin:0px;padding:0px;border:0px;color:rgb(48,51,54);">;</span>
    There is a polyfill to enable the touch API for MS browsers, though it shouldn't be necessary for this issue.


    CM

  • Pat Sebree
    Pat Sebree ✭
    Ninth Anniversary Photogenic First Reply
    Thank you for replying to my question. I am not using a touch action for my dropdowns. I am using hover and max-height of zero transitioning to a max-height of 100em to display the dropdowns on a larger screen with 'aria-haspopup-"true"' for touchscreens.


    At smaller sizes, the hover is disabled and I use a checkbox and toggle between display none and display block.


    It looks as if I am going to have to add some JavaScipt for larger touchscreens that use Edge or IE browsers on Windows 10, or make all of my dropdowns use checkboxs?

Categories