CODEWITHSUNDEEP
javascriptcssbootstrap-4
Maddie Graham
Maddie Graham

Reputation: 2177

Form fields select always grow down - Bootstrap 4

I use bootstrap 4 I would like my field to always grow down. Never up, no matter what half the screen is in the form select.

How to achieve this effect? I tried to use this data-dropup-auto="false" but to no avail.

The desired effect

enter image description here

Side effect

enter image description here

My form example:

<!-- form -->
<tr>
    <th></th>
    <td>
        <select name="city" class="form-control bg-white text-dark" data-dropup-auto="false" id="id_city">
            <option value="" selected>Choose your city...</option>
            <option value="1">Chorzów (3)</option>
            <option value="2">Katowice (3)</option>
            <option value="3">Diffrent (4)</option>
            <option value="4">Mallorcowo (3)</option>
            <option value="5">Milaberalinto (4)</option>
            <option value="6">Kalineskow (2)</option>
        </select>
    </td>
</tr>
<!-- end form -->

Upvotes: 1

Views: 780

Answers (2)

Awais
Awais

Reputation: 4902

I wanted to tackle this problem with CSS alone.(A hack actually :))

Bootstrap's dropdown's uses Popper.js for the positioning of the drop-down menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.

Here's the code I came up with.

.dropdown-menu{
    transform: translate3d(5px, 35px, 0px)!important;
}


.dropdown{
  margin-top:900px;
}
.dropdown-menu{
    transform: translate3d(5px, 35px, 0px)!important;
}

**Working snippet**
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

This will always force the drop-down to be below the button, even if the button is at the bottom of the screen.

Upvotes: 2

Guerric P
Guerric P

Reputation: 31815

You are using a native select element, and thus you have no control over its display. The browser automatically determines how to display it, based on its position relative to the viewport.

The only way to control this is to use a custom dropdown list that works with JavaScript and not with the native select HTML element.

Bootstrap provides this kind of custom dropdown and has some options that will help you achieve what you want: https://getbootstrap.com/docs/4.0/components/dropdowns/#options (what you need is to set the boundary option to window)

Upvotes: 2

Related Questions