Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element.

How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't work.

The desired layout:

https://i.sstatic.net/sVR3H.jpg

Unexpected behavior:

https://i.sstatic.net/RQASV.jpg

Here is an example of my form:

<!-- 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 -->
javascriptcssbootstrap-4

Answer №1

Your current setup utilizes a native select element, leaving you with limited control over its appearance. The browser independently determines how to display it based on its location in relation to the viewport.

To gain more control, consider using a custom dropdown list that utilizes JavaScript rather than relying on the default select HTML element.

An option worth exploring is Bootstrap's custom dropdown feature, which offers various settings to help achieve your desired outcome: https://getbootstrap.com/docs/4.0/components/dropdowns/#options (specifically setting the boundary option to window)

Answer №2

I devised a CSS-only solution for this issue. (Quite a hack, actually :))

Bootstrap's dropdown menu relies on Popper.js for proper positioning. This posed a challenge because Popper.js constantly checks and adjusts the dropdown position when scrolling, necessitating the use of an !important rule to override its behavior.

Below is the code snippet I crafted:

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


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

**Tested and functional code**
<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>

The provided solution ensures that the dropdown always appears below the button, even if the button is located at the bottom of the screen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In JavaScript, capture data returned from a function in a separate variable using a POST REST API call

So, here's the deal - I've got this awesome code that does a POST to an API in order to fetch some data. The best part? It works like a charm when it's wrapped up neatly in a function. But now, the tricky part comes in. I need to actually re ...

javascriptnode.jspost

Ways to align a button in the center using Material-UI

I'm struggling to find a way to center buttons in Material-UI. Here is the code snippet I currently have: function BigCard(props) { const { classes } = props; return ( <div> <Card className={classes.card}> <C ...

cssreactjsbuttonmaterial-uialignment

CSS changes triggered by JQuery are ineffective

Having trouble modifying the CSS of a class in my HTML file. I've been struggling with this for quite some time and can't figure out what I'm doing wrong. (I've already attempted multiple versions, but nothing seems to work) Here' ...

javascriptjqueryhtmlcss

Retrieve the accurate file name and line number from the stack: Error object in a JavaScript React Typescript application

My React application with TypeScript is currently running on localhost. I have implemented a try...catch block in my code to handle errors thrown by child components. I am trying to display the source of the error (such as file name, method, line number, ...

javascriptreactjstypescripterror-handling

SCORM: moving between SCOs by clicking a button in the presentation

Currently, I am developing a website that allows users to create presentations. One of the website's features is the ability to export presentations in SCORM format (either 1.2 or 2004). This is my first time working with SCORM and I am currently impl ...

javascriptjqueryhtmlscormpresentation

How to extract part of a string delimited by certain characters within GET parameters?

I have a requirement to modify an iframe src attribute generated dynamically by a BrightCove video player. Specifically, I need to eliminate certain GET parameters such as width and height, so that the width and height of the parent element take precedence ...

javascriptstringiframeslice

Categorize elements in an array based on a specific keyword

Struggling with my AngularJS (1) application, I can't seem to figure out how to split an array of items into separate arrays grouped by item. In simpler terms, I have an array with different items and I want to group them by their uuid like this: [ ...

javascriptangularjsjson

Incorporate a dropdown menu based on the selection made in another dropdown menu

I have a scenario on my website where I want to dynamically add select boxes based on the value selected in the previous one. Here is the code snippet: <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"> </script> & ...

javascripthtmlcss

What can you do with jQuery and an array or JSON data

Imagine having the following array: [{k:2, v:"Stack"}, {k:5, v:"Over"}, , {k:9, v:"flow"}] Is there a way to select elements based on certain criteria without using a traditional for/foreach loop? For example, can I select all keys with values less than ...

javascriptarraysjson

Retrieving values of checked boxes in a table using JavaScript

While using the select method, I had this line of code: Person_name = $('#selectedPerson').val() When selecting 2 values, person_name.length displays as 2. Recently, I switched to checkboxes displayed in a table. However, when I use person_name ...

javascript

Is it unnecessary to mention both JavaScript and AJAX together?

During a recent conversation I had, someone mentioned that it is inaccurate to state that since Ajax is JavaScript. The scenario was: "How can I perform an action on a webpage without requiring a page refresh?" My response: "Utilize JavaScript along wi ...

javascriptajaxterminology

Creating a Collage with Varied Image Sizes

Hey there, I'm trying to achieve something that seems simple, but I can't quite figure it out. What I want to do is query a table and display the results in two separate divs on my webpage. Here's an example of the HTML structure I have: &l ...

phphtmlmysqlcss

Guide to transferring existing Mongoose Schema information to updated Mongoose Schema Data

In the schema I was using previously with Mongoose, it looked like this: social:{ instagram: String, facebook: String, whatsapp: String, } Now, my updated Mongoose Schema is structured differently: social:{ instagram: { dat ...

javascriptnode.jsmongodbexpressmongoose

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

Hey there, take a look at this cool stuff http://jsfiddle.net/J9Tza/ <form class="validation"> <div> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" r ...

javascriptjqueryhtmlforms

Can you identify the attribute used for marking up an HTML code tag?

While examining a website's code to understand how they styled a specific section of their page, I came across the following snippet: <code markup="tt"> I thoroughly checked for any other references to this particular markup attribute ...

htmlcss

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Updating NavBar text dynamically based on user login status in React.JS

Within my project, there is a Navigation bar that I access from App.js. Depending on whether I am logged in or not, I want to display different versions of the NavBar. When logged in, the NavBar should have a logout button. And when logged out, it should s ...

javascriptreactjsreact-routerreact-hooks

What is the best way to place a div inside a navbar element inline?

Having a bit of trouble with my HTML code. I'm working on creating an offcanvas navbar. Here's the code snippet: <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a cl ...

htmlcssbootstrap-5

Removing the switcher outline in Bootstrap Switch: a step-by-step guide

I have implemented the bootstrap-switch - v3.3.1, however, I want to remove the default blue outline that appears around the switcher when toggling it on or off. Despite setting style="outline: 0 none; for the input, the outline remains visible. Below is ...

javascripthtmlcssbootstrap-switch

Remix is throwing a Hydration Error while trying to process data mapping

While working on my Remix project locally, I encountered a React hydration error. One thing I noticed is that the HTML rendered by the server does not match the HTML generated by the client. This issue seems to be related to the Material UI library usage. ...

javascriptreactjstypescriptserver-side-renderingremix