Custom bootstrap form input with dropdown suggestions

Question

I'm trying to create a form that on focus will display a dropdown of the users previous searches. However I'm running into issues marking up the html/css for this to look as I want.

I would like the dropdown suggestions to appear directly underneath the input box, that is, aligned with input box and zero spacing between the input box and suggestions.

You can see the problems I am having in this JSFiddle attempt, where the suggestions are wrapped after the navbar.

body {
    margin: 10px;
}

.navbar-container {
    display: flex;
    align-items: center;
}

.d-flex {
    display: flex;
    align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse bg-inverse">
  <div class="container navbar-container">
    <a class="navbar-brand" href="#">
      <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
    </a>
    <form class="form-inline d-flex">
      <input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
      <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
        <div class="dropdown-divider"></div>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
        <div class="dropdown-divider"></div>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      </ul>
    </form>
  </div>
</nav>

Carol Skelly · Accepted Answer · 2018-03-02 18:47:54Z

Just make sure the form has the .dropdown class since it's the parent of the .dropdown-menu.

https://www.codeply.com/go/ZJM3RKapo7

<nav class="navbar navbar-inverse bg-inverse">
    <div class="container navbar-container">
        <a class="navbar-brand" href="#">
            <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
        </a>
        <form class="form-inline d-flex dropdown">
            <input class="form-control form-control-sm" type="text" placeholder="Search" id="menu1" data-toggle="dropdown">
            <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
                <div class="dropdown-divider"></div>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
                <div class="dropdown-divider"></div>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
            </ul>
        </form>
    </div>
</nav>

Also, if you upgrade to 4.0.0 and you won't need the extra flexbox classes.

Alison Nunes · Accepted Answer · 2022-03-18 15:38:51Z

Take a look at The HTML Data List element[1]

body
{
    width: 100%;
    height: 100%;
    background-color: #1e1e1e;
    color: white;
    overflow: hidden;
}

.grd-row
{
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.datalist-picker
{
    border-radius: 0 .25rem .25rem 0;
    width: 24px;
    align-items: baseline;
    white-space: nowrap;
    background-color: #e9ecef;
    background-repeat: no-repeat;
    background-size: 16px 14px;
    background-position-y: 60%;
    background-position-x: 50%;
    margin-left:-24px;
}

.arrow-down-picker
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.datalist-group
{
    margin:0;
    position: relative;
    display: flex;
    white-space: nowrap;
    align-items: baseline;
    width: 100%;
    gap: 6px;
}

@media screen and (max-width: 999px)
{
    .datalist-group
    {
        position: relative;
        display: block;
    }
}

.datalist-group-input
{
    margin: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    gap: 0px;
}

.datalist-input
{
    margin: 0;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    background-image: linear-gradient(to right, #fff calc(100% - 23px), transparent 23px);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: .2rem;

}

    .datalist-input:focus
    {
        color: #212529;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

input::-webkit-calendar-picker-indicator
{
    opacity: 0;
}

<div style="width:75%; margin:9% 0 0 25%;">
    <div style="margin:0 auto;">
        <div class="ctrl-row" style="width:50%;">
            <div style="margin:18% 18% 1% 18%;">
                <div class="datalist-group">
                    <div for="ac-ad-cam-tit">Label</div>
                    <div class="datalist-group-input">
                        <input class="datalist-input" list="lst-autocomplete" placeholder="Placeholder text">
                        <i class="datalist-picker arrow-down-picker"></i>
                    </div>
                </div>
                <datalist id="lst-autocomplete">
                    <option value="Sun"></option>
                    <option value="Saturn"></option>
                    <option value="Jupiter"></option>
                    <option value="Mars"></option>
                    <option value="Neptune"></option>
                    <option value="Venus"></option>
                </datalist>
            </div>
        </div>
    </div>
</div>

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Custom bootstrap form input with dropdown suggestions

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related