The Bootstrap 4 dropdown button fails to expand properly within a table of fixed height

Is it possible to make a bootstrap 4 dropdown button function properly inside of a table with a fixed height for the tbody section? I am facing an issue where the button group menu does not pop out when the height is constrained.

#table1 tbody {overflow-y:scroll; display:block;height:120px;}

<td>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <a class="dropdown-item" href="#">Link 4</a>
      <a class="dropdown-item" href="#">Link 5</a>
      <a class="dropdown-item" href="#">Link 6</a>
    </div>
  </div>
</div>
</td>

In this image, you can see the menu expanding outside the table without a fixed height: https://i.sstatic.net/HBJp8.png

Contrastingly, in this image, the menu expands within the table with the fixed height for the tbody: https://i.sstatic.net/TrAx8.png

For a visual example, refer to this JSFiddle link.

cssbootstrap-4

Answer №1

To avoid issues, make sure to change the data boundary setting from scrollParent to another option like window, viewport, or an HTML element.

Visit this link for more information on dropdown options

.g {
  display: inline-block;
  vertical-align: top;
  margin-right: 40px;
}

table {
  border: 1px solid #ccc;
}

#t1 tbody {
  overflow-y: scroll;
  display: block;
  height: 120px;
}

td {
  overflow: visible;
  border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<body>

  <div class="container">

    <div class="g">
      <h2>Dropdown 1</h2>
      <table id="t1">
        <tr>
          <td style="width:80px;">1</td>
          <td>
            <div class="...

Answer №2

If you want to prevent Popper's overlapping logic, simply turn off the flip option by adding data-flip="false". Also, specify the boundary option as "table"...

<div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-flip="false" data-boundary="table">
            Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
            <a class="dropdown-item" href="#">Link 4</a>
            <a class="dropdown-item" href="#">Link 5</a>
            <a class="dropdown-item" href="#">Link 6</a>
        </div>
</div>

Check out the demo here:

For more information on the Dropdown component, visit: More on the Dropdown

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

Embed JavaScript within the Material-UI style components

I was hoping to incorporate some conditional logic within my MUI styles Currently, I am using inline styles which are functional <div className={classes.form} style={{alignItems: ((Code.length>10 || Description.length>100) ? 'start' : & ...

cssreactjsmaterial-ui

`Incorporating width and vertical alignment in an image`

I am trying to figure out a way to make the image fill up 100% of the width, aligning it vertically with the text below. The code I'm working on is for email newsletters using foundation. Check out my Example Site Unfortunately, I can't seem to ...

htmlcsszurb-foundation

The CSS method will not function properly on Safari when targeting the specific ID

that.displayIcon = that.scrollPosition / that.headerHeight $('#icon').css({'opacity':that.displayIcon}) that.rotateIcon = Math.min(1,that.scrollPosition/that.headerHeight) $('#icon').css({'transform':'rot ...

javascriptjqueryhtmlcsssafari

Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28. .nf-navbar .navbar-collapse a:hover { color: #ed1c28; } Additionally, when a user clicks on a ...

htmlcssipaddevice-compatibility

Exploring the effective utilization of bootstrap's push and pull functionalities

I've been struggling to rearrange my bootstrap columns for mobile view, but my code just isn't cooperating. It's likely that I'm making a mistake somewhere. Here is the snippet of my code: <div class="container"> <div cla ...

htmlcsstwitter-bootstrapresponsive-design

What could be causing bootstrap to suddenly stop working?

Running bootstrap on React and using Storybook to view it has been a smooth process until today. The code that worked flawlessly on Friday is suddenly not working at all. Despite trying it on Jsfiddle and onecompiler, the carousel component copied from the ...

cssbootstrap-5

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

jqueryhtmlcsstwitter-bootstrap

What could be the reason for my image not showing up in different views? (Rails)

Below is the code snippet for the application.html.erb file: <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand"><img src="info.png" alt=" ...

htmlcsstwitter-bootstrapruby-on-rails-5bootstrap-4

The slice() function is displaying the correct output in the console, but the string is not being updated in the <td>

I am facing an issue where the console displays the expected substring, but the original string in the HTML remains unchanged. The goal is to truncate any long text within each table <td>. It's important to note that I'm specifically avoi ...

javascripthtmlangularjsbootstrap-4

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

htmlcss

When the CKEDITOR is set to fullPage mode, it cannot properly apply styles from an external stylesheet that is configured in the config.contentscss setting

To create a custom StyleSet in CKEditor using styles from an external stylesheet, I configured the settings as follows: config.extraPlugins = 'stylesheetparser'; config.contentsCss = '/css/externalStyleSheet.css'; config.stylesSet = [ { ...

cssiframeckeditorckeditor4.x

Customize the background color of FullCalendar in a React application

I'm currently using FullCalendar in my react app to showcase a calendar with events displayed. Right now, I have a day grid set up and I'm interested in changing the background color of the grid. The background color for today's date is alw ...

htmlcssreactjsfullcalendarfullcalendar-5

Having trouble printing a section of a webpage after making CSS adjustments

When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects. <body> <h1><b><center>This is a test page for printing</center&g ...

javascripthtmlcssprinting

Reactstrap: Keep drop down menu open after an item is selected

In a DropdownItem, there is a search Input that should stay open when clicked to allow the user to type in their search query: import React, { Component } from "react"; import { connect } from "react-redux"; import { Dropdown, Dropd ...

reactjsbootstrap-4drop-down-menureactstrap

"Maximizing battery life: Efficient video playback on iOS in low power

Summary: I am currently working on a website that features a video set as the background which autoplays. However, I have encountered an issue on iOS devices when "Low Power Mode" is activated - the video fails to play and instead displays a large "Play" i ...

javascripthtmlcssioswordpress

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

I'm seeking guidance on how to convert this jQuery code into pure Javascript. $('.revealedBox').each(function() { if ($(window).scrollTop() + $(window).height() > $(this).offset().top + $(this).outerHeight()) { $(this).addCla ...

javascriptjquerycss

Header should elegantly glide up and down as the user scrolls through the page

I've implemented a top div on my page that houses contact details and social media links. I've managed to hide it during scrolling and make it reappear when reaching the top of the page. However, I'm hoping to smoothen this transition with a ...

javascriptjqueryhtmlcssbootstrap-4

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier ...

javascriptjqueryhtmlcss