Is it possible to create a dropdown menu that exceeds the width of its parent column?

I currently have a dropdown that contains 3 main "categories," each of which includes multiple checkboxes for search filtering purposes. Here is an example snippet of the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous></script>

<div class="col-3 dropdown">....

It is worth noting that the dropdown div also has a col-3 class applied to it. My goal is to have the dropdown menu expand horizontally beyond the constraints of the col-3, similar to how text-nowrap behaves with plain text inside a div. Here's an idea of what I would like to achieve:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">....

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

By default, Bootstrap adds position:relative to the .dropdown class. To make child elements extend beyond the dropdown, simply apply a custom class to override this behavior. In this example, I've used the .extended class.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha384-Abc456SlKMSlpqRvDrWxOZaxfBjk20fjLNBGfghFFfefffncMcDDs7mxNxxywSbx" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha384-Rosd8Dk398FNFIJFcseRNUI8pmiccNE9QdjwfLA98Hcs88e39wi3iuweIIEW844C" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@2/umd/popper.min.js" integrity="sha384-CVjasda784tssfgvsCSDFVERevCNhDuTExg93fiurienFISHFkejsndNSDKnsEKAS" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js" integverity="sha384-DdmMDMoppp09AjjlLSNDIF933LIepRKADSIaaDMSCENNMdhUksnaSDK33ckjaAIb" crossorigin="anonymous"></script>
<style>
     .extended {
         position: initial !important;
     }
</style>
<div class="col-4 dropdown extended">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Click Me</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h5>List 1:</h5>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item 1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item 2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item 3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>List 2:</h5>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item A</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item B</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item C</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h5>List 3:</h5>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item X</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item Y</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Item Z</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

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

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

#!C:\Users\aan\AppData\Local\Programs\Python\Python39\python.exe import numpy as np import skfuzzy as fuzz import cgi from skfuzzy import control as ctrl print("Content-type:text/html\r\n\r\n ...

pythonhtml

Unable to insert flag image into the <option> tag

Struggling to add a flag image to the options using any method (html,css)! <select> <option value="rus" selected>Rus</option> <option value="Uzb" >Uzb</option> <option value="eng">Eng</option> </s ...

htmlcss

"Enhance Your Website with Bootstrap Modal and Jazz up Your

I am encountering an issue with modal-bootatrap and bootstrap-datepicker. Within the datatable, there is a button provided for editing. Upon clicking the edit button, a modal-bootstrap will be displayed. The modal-bootstrap contains a form for editing d ...

javascriptjquerybootstrap-4bootstrap-modalbootstrap-datepicker

Eliminate odd white spacing within nested div elements in Chrome

Is there a way to eliminate the odd white space between two nested divs in Chrome? <div class="bar"> <div class="progress"> </div> </div> .bar { width: 200px; height: 6px; border: 1px solid black; ...

htmlcssgoogle-chrome

Guide on extracting HTML content from JSON and displaying it in a UIWebView (utilizing Swift 3.0)

Can anyone guide me on how to use JSON2HTML to parse HTML data from JSON and display it in an UIWebView using Swift 3.0? Your help is much appreciated! This is what I have attempted so far: let jsfile1 = try!String(contentsOfFile: Bundle.main.path(forRes ...

javascripthtmljsonswiftuiwebview

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

CSS: What's with the weird gray element appearing in Safari?

Does anyone have a solution for removing the grey layer (cf the image) in Safari? This issue does not occur in Chrome. The structure is as follows: <div class="class1"> <div class="class2"> <select> ... </selec ...

csssafari

Having issues with Inline-Block functionality?

I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...

htmlcss

Transforming a div into a clickable hyperlink

I have a JavaScript function that generates a div with a link inside it. Here is how the div and link are created: $('#info').find('#link').text("View"); //Creates a new link var eventLink1 = document.createElement('a& ...

javascriptjqueryhtml

Tips on automatically populating a textbox without the need for a button click

I am currently using the following code: <input type="text" value="<?php echo empty($this->session->store['actual_info']['actual_total_marketing_budget']) ? '' : $this->session->store['actual_info' ...

javascripthtml

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

javascripthtmlangularjssemantic-ui

The peculiar formatting issue with the jQuery datepicker that arises when adding more months

When adjusting the numberOfMonths parameter to a higher value such as 6, I noticed that the datepicker display appears unusual with the background extending further than expected. Take a look at my demonstration on jsfiddle: http://jsfiddle.net/zw3z2vjh/ ...

javascriptjquerycssdatepicker

Change the color of this element and input field background

Having trouble with setting the background color of an input field to red in this code: $(document).ready(function(){ $(".abc").focus(function(){ $(this).attr('background', 'red'); $("label").text('Insert tex ...

javascriptjqueryhtmlcss

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it. Here's the code I'm using: <body style="background-image: url(background.png) ...

cssbackground

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

javascriptjqueryhtmlcss

What is the process for adding a line of JavaScript directly into the code (instead of using an external .js file)?

I am trying to insert a script tag that will run one line of JavaScript directly into the head of a document instead of inserting an empty script tag with a src attribute. So far, I have the following code: <script type="text/javascript"> var script ...

javascripthtmldom

Having trouble with an echoing PHP code error?

When I try to display my PHP code on the website, it is not showing up properly and instead displaying random numbers. I am attempting to add a feature to my website where the text updates every week from a stored file called quotes.txt. Can anyone advise ...

phphtml

Answer for background picture when reducing magnification

Currently, I am facing the challenge of converting a PSD template to HTML. Specifically, I need guidance on how to handle the background food images (highlighted in red in the image) when zooming out the browser. The total width is 1300px with a container ...

htmlcss

Is there a way to group together select values in a dropdown menu under a shared category?

If I have a dropdown menu that looks like for example: <select> <option value="1">1</option> <option value="3">3</option> <option value="2">2</option> <option value="4">4</option> </select&g ...

javascripthtmlgoogle-fusion-tables

sound not functioning on iPad

<audio id="example" controls="controls"> <source src="1.mp3" type="audio/mpeg" /> <source src="1.ogg" type="audio/ogg" /> </audio> JavaScript code to automatically play video when the page loads document.getElementById(&ap ...

javascriptipadhtmlaudio