Display search bar and search button inline with CSS - html

Question

I'm building a little website (link) which displays a search bar in the navigation bar. I'm using Bootstrap 4 for the navigation bar controls, and Algolia Places for the search bar HTML input element. The problem is that I cannot align the search bar with the search button, even though I'm using form-inline. Also, the search results displayed when typing something in the search bar get cut off.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
Drinking Fountains
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Map
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="mr-sm-2" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

Answer 1

#navbarMenu .form-inline {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
... should do the trick.
or, using Bootstrap flex utility classes:
<form class="d-flex align-items-center flex-nowrap">
But, to also resolve the border-radius issue, you might want to change your markup to:
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-light" type="submit">Search</button>
</div>
</div>
</form>

Answer 2

Make sure the <button> is display:inline-block. And your input has max-width:100% instead of width:100%.
Also your .ap-dropdown-menu isn't Z-indexed properly above the map.

Answer 3

using Bootstrap:
wrap your <span> where search is and button with <div class="d-flex"></div>, and add to <span> class mr-2 for space you want.
Should be something like this:
<div class="d-flex">
<span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</div>
and
result