[英]CSS - Making algolia dropdown menu with results go over the dropdown menu of bootstrap navbar
I have a navbar with a search form, where I get the results from Algolia with their autocomplete solution. 我有一个带有搜索表单的导航栏,在那里我从Algolia获得他们的自动完成解决方案的结果。 This is the navbar: 这是导航栏:
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
<span></span>
<span></span>
</div>
<a href="{{ url('/') }}">
<img class="logo logo-small" src="{{ asset('/img/logo-small.png') }}" alt="logo">
<img class="logo logo-big" src="{{ asset('/img/m2.png') }}" alt="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form action="/search" method="get" class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<button type="submit"><i class="ion-ios-search-strong"></i></button>
</span>
<input type="text" id="search-input" name="q" class="form-control" placeholder="Search for videos or players..." value="{{ Request::get('q') }}" autofocus>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="{{ url('/login') }}" class="btn btn-primary">Sign in</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On small screens I have a problem, that the results are inside of the navbar dropdown menu 在小屏幕上我有一个问题,结果是在导航栏下拉菜单中
Where I would like them to go over the dropdown menu. 我希望他们在下拉菜单中查看。 I have tried with setting the z-index for various elements of algolia dropdown: 我试过为algolia下拉列表的各种元素设置z-index:
.algolia-autocomplete {
z-index: 999999 !important;
}
But that didn't work, not sure where exactly should I change the z-index, since the element is created on autocomplete so I am not able to see the structure before I type in something. 但是这不起作用,不确定我应该在哪里更改z-index,因为元素是在自动完成时创建的,所以在输入内容之前我无法看到结构。 How can I fix that? 我该如何解决这个问题?
The problem was in the bootstrap class: 问题出在bootstrap类中:
.navbar-collapse.in {
overflow-y: auto;
}
I had to change it to overflow-y: visible;
我不得不把它改成overflow-y: visible;
and then it worked. 然后它奏效了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.