search

octobercms / october

Self-hosted CMS platform based on the Laravel PHP Framework.
https://octobercms.com/
Other
11.02k stars 2.21k forks source link

Dropdown Menu cannot click in mobile devices #5451

Closed huynhnamegal closed 3 years ago

huynhnamegal commented 3 years ago

I have read an issue #3506 but dropdown menu still cannot click into href link

Description:

I used dropdown in https://octobercms.com/docs/ui/dropdown for my toolbar. It's very good in large devices, in mobile menu I cannot click to any link in the sub-menu items. I'm tested in iPhone 11 and in Safari & Chromium. I'm think my code have problems, but I cannot use functions in 'Manage plugins' such as Enable/Disabled in Plugins area

huynhnamegal commented 3 years ago

More detail, I have tried to use data-request for each dropdown item and create function to redirect in controller, but it still un-clickable. And if we use desktop browser to simulate mobile devices, it worked, in native device, it not

danielbidala commented 3 years ago

@huynhnamegal I can't test it on iPhone but it works on android/chrome as expected. Show us the code you use and screenshot or gif to see what's happening

huynhnamegal commented 3 years ago

@huynhnamegal I can't test it on iPhone but it works on android/chrome as expected. Show us the code you use and screenshot or gif to see what's happening

image This is my code, I copied in https://octobercms.com/docs/ui/toolbar and added new link to my plugins

https://user-images.githubusercontent.com/20609668/104794199-ace25a80-57d8-11eb-9d64-d915cf53f7c6.mov

This video in safari on iOS. Cannot click

https://user-images.githubusercontent.com/20609668/104794305-51649c80-57d9-11eb-9e26-3af61c8cdaf3.mov

This video in Chrome on iOS. Sometimes can click and cannot click. With the same code.

danielbidala commented 3 years ago

I tested the below code with lambdatest emulating iPhone 11 with Safari and it's working. What style do you attach for dropdown-fixed class?

       <div class="dropdown">
        <a href="#" data-toggle="dropdown" class="oc-icon-ellipsis-h btn-icon"></a>

        <ul class="dropdown-menu" role="menu" data-dropdown-title="Some title...">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="" class="oc-icon-edit">Edit</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="" class="oc-icon-folder-open-o">View</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="" class="oc-icon-print">Print</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="" class="oc-icon-file-pdf-o">Pdf</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="" class="oc-icon-trash-o">Delete</a>
            </li>
        </ul>
    </div>
huynhnamegal commented 3 years ago

I have copied your code in and paste to my code, it don't work. I don't know why, but if I remove dropdown-fixed, I cannot click and see the inside dropdown item. This is my code for toolbar button

    $uName): ?>
huynhnamegal commented 3 years ago

Hi @danielbidala, I have found out the solution for above problem. Fix to all devices with smooth animation. I have used bulk-action that from Rainlab.User plugin. Thanks for your support!