The sizing of Bootstrap Inline dropdown menus is not accurate

I want to create two dropdown menus using Bootstrap v3 that are displayed side by side with a specific width and utilizing the grid system.

However, I am facing an issue where the width remains the same. Here is an example of what I mean:

.menuList > div.dropdownInline {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="menuList">
<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this alert message.</div>
      </div>
    </div>

  </div>
</div></div>
<hr />
<h1>Without inline... </h1>

<div class="menuList">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">An informative message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this alert message.</div>
      </div>
    </div>

  </div>
</div></div>

When using the "inline" class for the dropdowns, they appear squished and do not stretch properly in width as compared to when the class is not used. One of them even fails to show the blue panel. What could be causing this issue?

htmlcsstwitter-bootstrap

Answer №1

Adjusting the width of a menu can be done easily

.dropdown-menu{
  width:400px;//or any desired width
}

Take a look at this example on Plunker

.dropdowm-menu may only be as wide as its content, so adjust it as demonstrated above or set the width of its child elements.

Answer №2

.menuList > div.dropdownInline {
  display: inline-block;
}
.dropdown button{ margin-top:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="menuList">
<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

  </div>
</div></div>
<hr />
<h1>Without inline... </h1>

<div class="menuList">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

  </div>
</div></div>

Just insert it

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

What is the best way to design a dynamic gallery that showcases three columns for large screens, but switches to two columns for mobile devices?

My goal is to create an image gallery using Bootstrap, with 3 columns on large screens and 2 columns on mobile. I want to maintain the aspect ratio of each image while fixing the width so they align within the columns. I was able to achieve this on large s ...

htmlcssbootstrap-5

Angular Bootstrap notifications will stay open indefinitely and will not automatically dismiss after a certain period

I need help with adding alerts using Angular Bootstrap that should dismiss themselves after a certain timeout. However, the alerts are not dismissing on their own. Here's the code snippet: angular.module('ui.services').service('AlertSe ...

javascriptangularjstwitter-bootstrapalerts

Angular List Selector: A versatile multiple selection component with a stylish list design

I'm in need of a select component similar to the one shown in The issue is that Material Angular doesn't have this specific component, so I opted to use the default HTML select inside my component. Everything was working fine until I tried to de ...

htmlangularangular-material

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...

javascriptjquerycssdrop-down-menuclick

Eliminate Video Time Indicator

Can the video progress bar be removed from this specific video player? I would like it to be integrated into the embed code that I share with others. <iframe id="hapyak-player-157199-8825" marginwidth="0" marginheight="0" frameborder="no" scrolling=" ...

javascripthtmliframe

What is the correlation between statistics and posts that are generated dynamically?

One interesting aspect to consider is how statistics are connected to individual posts. For instance, linking the like count to each Facebook post or tying upvote and downvote stats to a question on Stackoverflow presents some intriguing challenges. How ...

phpjavascripthtmlajax

Retain the user's input in the text box even after the form has been submitted

Currently, I am tackling the challenge of creating a register form with an error handler to manage any mistakes made by users during registration. Once the form is submitted, potential errors are displayed to the user. To enhance user experience, I am ex ...

javascripthtmlforms

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Looking for a scrolling effect in an HTML Dialog with Google Apps Script. I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog. < ...

javascripthtmljquerycssgoogle-apps-script

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

Utilizing jQuery Mobile - Dividing content across multiple HTML files

In the process of developing a web application utilizing jQuery and jQuery mobile, I am aiming to display various pages. Given that the corresponding html-markup may become lengthy, I am interested in dividing the html into separate files. For instance: & ...

javascriptjqueryhtmljquery-mobile

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

htmlcsstextnavigationalignment

Dealing with repeated parameters in a URLHow can you handle duplicate

My Ajax select input dynamically changes the URL without refreshing the page. However, I have encountered an issue where repeated parameters stack in the URL when the select input is changed multiple times: [domain]/find.php?cat=1#pricemin=10&pricem ...

javascriptjqueryhtmlajaxurl

Is it possible to mix units within the 'path' element in SVG?

Utilizing SVG's rectangle element, you can specify dimensions as a percentage of its owner's dimensions and set a radius in pixels. By using the code below: <div style="position: relative;"> <object class="AIRound" t ...

htmlsvg

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

I am trying to choose an element/item from a drop-down menu in Python and Selenium without using an id element. Here is the HTML code snippet: <mbo-transaction-mode-select mode="filters.mode" class="ng-isolate-scope"> <select class="form-con ...

pythonhtmlselenium

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

App.post is returning a set of empty curly braces as the response

I am currently working on an express.js application that retrieves data from a MySQL database and displays it on the screen. I am also trying to implement an insert functionality so that I can add data to the database via the browser. However, when I post ...

javascripthtmlmysqlnode.js

Modify the color of drop-down menu links

Recently, I set up a drop-down menu containing links. Initially, when hovering over the names in the menu, they would change color and display the drop-down. I had successfully made all the names golden, with the hovering name turning black while display ...

htmlcssdrop-down-menu

Wrapping content in flexbox and aligning it justified

I have an issue where I want to display a page title on the left side and a rating number with stars on the right side. My goal is to center all items once flexbox wraps. Specifically, when the "Longer Page Title" reaches the rating and stars and the flexb ...

cssflexbox

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss