Adjust the width of the dropdown menu to match the width of the textbox when using

I am looking to create a dropdown width that matches the width of a textbox using bootstrap techniques.

https://i.sstatic.net/kKrsz.png

NOTE: The size should adjust automatically based on the width of the textbox, not relative to the page width.

<!doctype html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde1fde0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b170b16">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <div class="dropdown">
    <input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="false" data-bs-auto-close="outside" readonly>
    <div class="dropdown-menu p-0">
      <div class="list-group">
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet1 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet2 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet3 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet4 </label>
      </div>
    </div>
  </div>
</body>

</html>

htmlcssbootstrap-5

Answer №1

You should include the .w-100 class within the .dropdown-menu div.

For information on sizes, refer to the documentation available on Bootstrap's website

<!doctype html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea2bea3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b170b16">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <div class="dropdown">
    <input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="false" data-bs-auto-close="outside" readonly>
    <div class="dropdown-menu p-0 w-100">
      <div class="list-group">
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet1 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet2 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet3 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Sheet4 </label>
      </div>
    </div>
  </div>
</body>

</html>

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

Optimizing HTML and Script loading sequences for efficient execution

I have a query regarding the loading order of scripts in web browsers. I am interested in knowing the most efficient way to redirect users to a mobile website on the client side. For example, if I place a mobile detection script within the <head> se ...

javascripthtmlperformancemobile

Tips for verifying the status of an input element following the dynamic addition of a required element

I have implemented a required field for all input elements in a specific state using the following code: for (var i = 0; i < data.length; i++) { // activate required function v = data[i].Required; if (v) document.ge ...

javascripthtmlangularjs

Verify the position of the scrollbar without triggering any reflow

Here is a function I have: is_bottom: function() { if (settings.scrollBottomOffset === -1) { return false; } else { var scroll_height, scroll_top, height; scroll_height = ...

javascripthtmlcssperformance

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

javascriptjqueryhtmlcss

The concept of Theme.breakpoints does not exist in MUI React, there is

I keep running into the same error where theme.breakpoints is undefined when I try to use theme.breakpoints.up in my code. The versions of the dependencies I am currently using are: "@emotion/react": "^11.9.0", "@emotion/styled&quo ...

javascriptcssreactjsreduxmaterial-ui

How do I navigate to the homepage in React?

I am facing an issue with my routes. When I try to access a specific URL like http://localhost:3000/examp1, I want to redirect back to the HomePage. However, whenever I type in something like http://localhost:3000/***, I reach the page but nothing is dis ...

javascripthtmlcssreactjsreact-router-dom

What is the best way to retrieve the value that has been submitted in a Django form?

I am in the process of developing an online marketplace where users can submit bids through a form. The bid must be higher than both the listing price and any existing bids. I am seeking assistance in extracting the value submitted by the user to ensure it ...

pythonhtmldjangodjango-formscs50

Elements featured in the header: logo, tagline, graphics, and more

I'm interested in designing a schema with the following elements: I'm contemplating whether it would be beneficial to have a separate container for the logo and slogan. Additionally, I am considering if it is advantageous to create a container f ...

css

The Angular API request is continuously retrieving data every single second

I recently inherited some Angular/ng-bootstrap code that included a table with static data, which was functioning perfectly. However, the requirement now is to fetch the data from an API call. In an attempt to modify it accordingly, I referred to an answer ...

angularrxjsbootstrap-5angular-ui-bootstrap

How can we avoid having the same event duplicated on a canvas, leading to the unnecessary rendering of multiple layers of the same event?

I have encountered an issue with my Chrome extension on certain websites where, upon scrolling, the same element is rendered multiple times, causing a significant decrease in performance. This rendering occurs as soon as I stop scrolling, leading to layers ...

javascripthtmlreactjsgoogle-chrome-extensiongoogle-chrome-devtools

Chrome displaying an extJs Button image

Could it be that Chrome is evolving into the new IE in terms of CSS issues? Here is the code I have for creating ExtJS buttons within an accordion: var button = Ext.create('Ext.Button', { text: '<img src="'+resp.sellers.externa ...

javascriptcssimagegoogle-chromeextjs

What is the method to choose an invisible link without an identifier using Selenium WebDriver?

I am attempting to click on the link labeled 'User Requested'. This link only appears when hovering over the menu. This is the HTML code: <ul class="k-widget k-reset k-header k-menu k-menu-horizontal" id="menu" data-role="menu" tabindex="0" ...

phphtmlseleniumxpathselenium-webdriver

Script on Tampermonkey executed prior to page loading

I am facing a challenge with hiding a specific section from an HTML page: <h1 data-ng-show="!menuPinned &amp;&amp; !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX&nbsp;</span><span style="font-weight: bold;"& ...

javascripthtmltampermonkey

Scrolling horizontally with Bootstrap 4

I'm having trouble with this issue: I need my "Factuur" (Dutch for invoice) to always be at a width of 800px, but on mobile devices, the rows are collapsing into each other. I want the invoice to remain static and be scrollable. Below is my CSS code: ...

phphtmlcss

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

Symfony2's W3C XHTML validation fails when validating form submissions according to the W3C standards

Having an issue with valid w3.org XHTML - the validator is showing an error on the required attribute of an input: The attribute "required" is not recognized. I firmly believe that this attribute is necessary, as it is included by Symfony2 form builder f ...

formshtmlvalidationxhtmlsymfony

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

javascriptjqueryhtmlcssparallax

Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px. When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes ...

csshtml-lists

Preventing page navigation in JavaScript: Why it's so challenging

I am encountering an issue with a link element that I have bound a click event to (specifically, all links of a certain class). Below is an example of the link element in question: <a id="2" class="paginationclick" style="cursor: pointer;" href=""> ...

javascriptjqueryhtml

"Share your social media profiles without redirecting users to new tabs

Currently in the process of launching my own website using the free Portra theme. So far, everything has been going smoothly with this widget free template. However, I have encountered an issue with my social links opening in the same window. I would prefe ...

htmlwordpress