Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 11661

Bootstrap 5.3 dropdown links are not working on mobile safari

$
0
0

I have a search input and I'm triggering the live search results div when I focus on search input. Results list works perfectly on desktop but even though it renders correctly on mobile phone, list links are not clickable. When I click to link, it closes the results div.

But I when long press to the link, it shows me if I want to open the link in a new tab. Normally it should open the link directly.

This the HTML code:

<div class="search-list"><ul class="dropdown-menu show" data-bs-popper="static" role="menu">    @foreach($results as $result)<li><a class="dropdown-item" href="{{route('PostShow', $result->id)}}">{{$result->title}}</a></li>    @endforeach    @foreach($movies as $movie)<li>            @if($movie['poster_path'])<a class="dropdown-item" href="{{route('Movies.show', $movie['id'])}}">                    {{$movie['title']}} ({{date('Y', strtotime($movie['release_date']))}})</a>            @else<a class="dropdown-item" href="{{route('Movies.show', $movie['id'])}}"><img src="{{asset('images/no-poster.png')}}" alt="" style="width: 20px">                    {{$movie['title']}} ({{date('Y', strtotime($movie['release_date']))}})</a>            @endif</li>    @endforeach    @foreach($actors as $actor)<li>            @if($actor['profile_path'])<a class="dropdown-item" href="{{route('Actors.show', $actor['id'])}}">                    {{$actor['name']}}</a>            @else<a class="dropdown-item" href="{{route('Actors.show', $actor['id'])}}"><img src="{{asset('images/no-profile.png')}}" alt="" style="width: 20px">                    {{$actor['name']}}</a>            @endif</li>    @endforeach</ul>

This is my CSS code:

.dropdown-menu {border: none;background-color: rgba(14, 14, 19, 0.9);box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,    rgba(0, 0, 0, 0.23) 0px 6px 6px;}.dropdown-menu::after {content: "";position: absolute;border-radius: 8px;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(7px) !important;z-index: -1;}.dropdown-item {border-radius: 3px;text-wrap: pretty;}.navbar-search {position: relative;}.search-list {display: none;position: absolute;min-width: 250px;max-width: 250px;text-wrap: pretty;top: 100%;left: 0;margin-top: 8px;z-index: 1000;}.navbar-search:focus-within .search-list {display: block;}

You can check what I mean from this link. Thanks in advance for any help.


Viewing all articles
Browse latest Browse all 11661

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>