Align Bootstrap 4 dropdowns with their parent element

Is there a way to match the width of a bootstrap dropdown menu with its parent input group?

 <div id="ddl_1" class="input-group">
   <input type="text" class="form-control ">

   <div class="input-group-append">
     <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
             aria-haspopup="true" aria-expanded="true" 
             data-toggle="dropdown" 
             data-boundary="viewport" 
             data-reference="parent" 
             data-target="#ddl_1">
     </button>
     <div class="dropdown-menu">
       <div class="dropdown-item">Name 0</div>
       <div class="dropdown-item">Name 1</div>
       <div class="dropdown-item">Name 2</div>
       <div class="dropdown-item">Name 3</div>
       <div class="dropdown-item">Name 4</div>
     </div>
     
   </div>
 </div><!-- end input group -->

Please note that I have utilized

data-boundary="viewport"
in this setup because it is placed within a scrollable container and may exceed the boundaries.

https://codepen.io/Lieroo/pen/JjKadpa

Answer №1

To update the positioning of the "input-group" div, simply change the class from "position-static" to "position-relative". Additionally, include the "w-100" class in the "dropdown-menu" div.

 <div id="ddl_1" class="input-group position-relative show">
   <input type="text" class="form-control ">

   <div class="input-group-append">
     <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
             aria-haspopup="true" aria-expanded="true" 
             data-toggle="dropdown" 
             data-boundary="viewport" 
             data-reference="parent" 
             data-target="#ddl_1">
     </button>
     <div class="dropdown-menu w-100">
       <div class="dropdown-item">Name 0</div>
       <div class="dropdown-item">Name 1</div>
       <div class="dropdown-item">Name 2</div>
       <div class="dropdown-item">Name 3</div>
       <div class="dropdown-item">Name 4</div>
     </div>
     
   </div>
 </div><!-- end input group -->

https://codepen.io/callmesupercookie/pen/MWeqaeX

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

Enhance Your Website with jQuery and Bootstrap Carousel Slid Event

Has anyone else experienced issues with creating a simple event handler on a Bootstrap Carousel? I'm trying to get the current slide while it's sliding, but no matter what, it always returns 0, even when the slide is changing from 1 to 2 or 0 to ...

Is there a way to ensure all images have uniform height using CSS?

I manage a dating platform where I showcase user profiles along with their profile pictures. In case a user doesn't have a profile picture, I show a specific default image. Below is the code snippet: @register.inclusion_tag(filename='accounts/pr ...

Ways to prevent Bootstrap column from aligning at the bottom of a row

<div class="row"> <div class="col-lg-10"> <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100"> ...

The element 'Listitem' is unrecognized and cannot be found in the current context

I am currently working on an ASPX project in Visual Studio and have encountered an issue with a Drop Down field. It appears that the List Items are being ignored in my code. Can anyone advise me on what might be missing? <form runat="server"> &l ...

Assign an identifier to the HTML helper Html.EditorFor

When using a textbox created with the HTML helper "@Html.EditorFor", there may be a need to perform some action with JavaScript on its change event. In order to do this, an ID needs to be set for the textbox. For example, if you need to set a string value ...

TinyMCE's Textarea is blank and not displaying any content

I can't seem to figure out where I went wrong with using TinyMCE. I downloaded it from and chose version 4.0.3. After downloading, I ended up with a folder called tinymce_4.0.3 which contained subfolders like tinymce_4.0.3\tinymce\js\t ...

Enhancing JSON Objects in AngularJS with Custom Properties and Calculations

Hello, I'm still getting the hang of angularjs and could use some guidance. I have a Rest service that provides data on saleItems when a get request is made, as shown below: saleItems = [ { "id": 236, "variant": "Oval Holder", "mrp": "6 ...

Tips for showing the database list based on the chosen value in the drop-down menu

manage_bank Hey there, I need some assistance with displaying the bank name based on the selected dropdown option. For instance, if we choose 50 records, it should display 50 records of the bank name from the database. Additionally, I want the selected v ...

AngularJS routing that is tailored to form input

I am trying to create a dynamic html page where the user can input form variables. My goal is to use AngularJS routing to navigate to different URLs based on the form inputs. Does anyone have advice or guidance on how I can achieve this functionality? ...

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

The inefficacy of the JQUERY validation plugin, AJAX, and PHP integration

After diving into learning AJAX for submitting forms, I've encountered a roadblock. The data I submit doesn't seem to reach the PHP file as expected, and I can't figure out why it's failing. Here's my HTML: <div class="col-md- ...

Tips for preventing Uncaught SecurityError: Blocking a frame with origin in phonegap

I'm in the process of developing a phonegap application that serves as a miniature browser for a client's website. This app will allow the client's customers to access their favorite pages with ease. Once a user selects a favorite, it will b ...

Discovering the absolute path to @font-face fonts using Firebug

Is it possible to retrieve the absolute URL of a web font specified within an @font-face rule using tools like Firebug? For example: When inspecting the main.css file for a website in Firebug, you may come across this code snippet: @font-face { font ...

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

`Some Items Missing from Responsive Navigation Menu`

Hey there! I'm currently diving into the world of responsive design and I'm attempting to create a navigation bar that transforms into a menu when viewed on a mobile device or phone. Everything seems to be working fine, except that not all the na ...

CSS styling for the dropdown list in the content/option section

Can someone help me with a simple question I've been researching for hours without success? I'm trying to figure out how to style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this screenshot ...

Display Bootstrap modal upon page load automatically

Is there a way to automatically trigger the Bootstrap model upon page load? I attempted implementing the following code in my index file: <script type="text/javascript> $(window).load(function () { $('#myModal').modal('sh ...

Creating a repeated design using linear gradients in CSS

As I venture into the realm of Photoshop patterns for the first time, I am working on a webpage where I plan to incorporate these patterns to enhance the background. The pattern I have discovered measures 120x120 px. If I were to stop here, I would simpl ...

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...