Adjusting the dropdown button's width to match that of the dropdown item's width

In my dropdown menu, the button width is different from the dropdown items. I am looking to make both the button and the dropdown items have the same width.

<div class="dropdown col">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a form</button>
    <ul class="dropdown-menu col-xs-12">
        <a class="dropdown-item" href="#">word</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">word</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Very long word</a>
    </ul>
</div>

Even though the width of the "Very long word" item matches that of the "word" items, only the button's width is different.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

One approach to accomplish this is by enclosing the button and dropdown menu within a new div element and defining your preferred width within it (I've chosen a width of 200px for demonstration purposes). Subsequently, you can ensure that its child elements (button + dropdown menu) inherit the width of their parent div by using the following CSS code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="dropdown col">
    <div style="width: 200px;">
        <button style="width: inherit !important;" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a form</button>
        <ul style="width: inherit !important;" class="dropdown-menu dropdown-menu-center">
            <a class="dropdown-item" href="#">word</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">word</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Very long word</a>
        </ul>
    </div>
</div>

Answer №2

It seems unclear based on your tags whether you are specifically seeking advice related to Bootstrap, but one solution could involve setting the parent container, .dropdown, to use display: flex along with flex-direction:column. This would allow the child elements to expand along the primary axis of the flex parent.

.dropdown {
  display: flex;
  flex-direction: column;
}

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

Displaying supplementary information from a dataset upon hovering over it

Currently, I am working on a mini web application that involves fetching data from the server using a php script and Jquery's AJAX methods. The plan is to slide down three columns in a table layout, then display additional data under each row when hov ...

jqueryhtmlajax

Having trouble getting the CSS in my tab control to work consistently across all browsers. Any tips on how to troubleshoot and fix this issue?

When using CSS, there are essentially two classes involved. One controls the default color of tabs, while a "selected" CSS class is added through JavaScript when a tab is clicked. The functionality works perfectly, but unfortunately, the dynamic CSS only ...

javascriptcss

What is the best way to create text that dynamically wraps or moves to the next line?

My design has a slight issue: https://i.sstatic.net/riLOQ.png The text in the middle sometimes ruins the look. For reference, check out this https://i.sstatic.net/mdNd8.png I need the text to go down and continue from where it started after reaching a c ...

htmlcss

Checking the validity of an input element with jQuery: How to determine if the valid or invalid pseudo-class has been applied?

Is there a way to check for the application of the CSS3 :valid or :invalid pseudo-class on an input element using jQuery? I want to verify if the form element has passed CSS validation before allowing the submit button to be enabled. Here are some methods ...

javascriptjqueryhtmlcss

Remove the whitespace between the <h2> element and the CSS animation

Is there a way to remove the space between h2 and the animation in the following code snippet? .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 50px; height: 50px; -webkit-animation: spin 2s li ...

cssbootstrap-4

Date selection feature malfunctioning in MVC application due to Bootstrap datepicker issue

I followed the third solution provided by this individual: Essentially, it instructed to install via Nuget Package Manager in Visual Studio: Install-Package Bootstrap.v3.Datetimepicker Furthermore, it required adding the following to Bundle.config: bun ...

jqueryasp.net-mvctwitter-bootstrapdatepicker

Invoking functions within a jQuery extension

I've come up with this code to define the instance of my plugin: $.fn.someplugin = function(opts) { $(document).on('click', '.option-1', function() { alert(1); }); }; To make my plugin work, I utilize code similar to this ...

javascriptjqueryhtmleventsplugins

Creating a second level drop down menu with HTML and CSS

After exploring a few questions and attempting to use similar ideas, I'm still struggling to get this to work. Could someone lend a hand? My goal is to create a second level drop-down menu using a provided template that does not have it built-in. How ...

htmlcssmenu

Tips for creating dynamic bindings for elements within a Jquery UI tooltip

Currently, I'm utilizing the Jquery UI Tooltip Widget to create a tooltip that triggers an AJAX request for fetching data from the server. My goal is to attach an element that is dynamically generated through the AJAX request using the .on() method fr ...

javascriptjqueryhtmlajax

What's the reasoning behind incorporating a superscript esf in the Zap Chance typeface?

I'm working with a sample HTML file that includes the Zap Chance font. <!DOCTYPE html> <html> <head> <style> @font-face { font-family: myFirstFont; src: ...

htmlcssfontsfont-facetruetype

enclosing a fixed or absolute div within a relative div

I am trying to ensure that the text on my website remains below an absolute positioned menu. The menu is overlaying a div with text, and I want the layout to appear as if the menu was relatively positioned. HTML <nav id="s-nav-wrap"> <di ...

phphtmlcss

What is the best way to allocate the remaining space to one div while setting the first div to 20vmin?

I am facing a challenge with two div elements in my design. One of the divs has been set to have a height of 20vmin, but I am struggling to make the other div take up the remaining height. Initially, I experimented with using 80vmin for the second div, ho ...

css

Has the Blueprint CSS framework become obsolete?

Is the Blueprint CSS framework still being actively maintained? The last version was released over a year ago and there have been no recent commits in the Github repository. ...

cssblueprint-css

Is there a way to implement a JavaScript function that can dynamically update the color scheme and background colors of all HTML pages within my website?

Looking for help on implementing a Javascript function that can modify the color schemes and background on all pages of my website. I tried using a function but it's only affecting one page. Can anyone offer guidance or suggestions? I'm finding t ...

javascripthtmlcssbackground-image

Creating a javascript function to update content on click

Recently, I've been designing a webpage and encountered an issue. I want the text in a specific area to change whenever a user clicks on a link. Below is the code snippet related to the section I want to modify using a JavaScript function. <div id ...

javascriptjqueryhtmlcss

Different strategies for displaying a singular pie chart on multiple pages

I have implemented a pie chart on an HTML page and now I want to display this chart on multiple other HTML pages. Below is the JavaScript code for creating the pie chart: function piechart() { var chart; var legend; ...

javascriptjqueryhtmljsp

List that dynamically changes in HTML email template

I'm currently working on an email template using HTML, and I've run into a roadblock while trying to create a list based on Java code data. The challenge is that the length of the list varies each time. Here's what I tried: <span st ...

htmlhtml-email

Angular 4 - Nested Dropdown Menu with Submenus (Multiple Levels)

Just diving into Angular 4 development and have a specific requirement. Seeking guidance on the optimal approach to implement the following. Looking to add a Dropdown menu to the header of my website. Clicking on the Dropdown menu image should reveal a me ...

angularbootstrap-4

Is it possible to open a new tab by clicking on an anchor tag

I have a scenario with two tabs on a webpage, each with anchor tags that I can navigate to from the homepage using a header menu item anchor. The tabs are working fine with an active class and aria-expanded="true", but I'm facing an issue where the ap ...

javascriptjqueryhtmlcsstabs

What is the process for extracting HTML code from a URL in a web browser?

Is there a way to view HTML code in preview mode on a browser? similar to this example The output of the link should display as "{{ color.name }}" ...

htmlangularjs