Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dropdown `data-boundary` option not working in scrollable column

See original GitHub issue

When a dropdown is placed in a scrollable column (.col) the data-boundary option has no effect. As @rinick pointed out here this is due the columns position: relative; property.

Is this something Bootstrap or popper.js can/should fix or has the user to deal with it?

See: https://codepen.io/jackmu95/pen/XqBWwx

Issue Analytics

State:
Created 5 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

jacobmllr95commented, May 25, 2018

@notaphplover You are right that it’s bad practice to style columns directly but I couldn’t come up with better markup for my concrete situation where I faced the issue.

Here is a pen to show what I mean: https://codepen.io/jackmu95/pen/yjdzvy

The general question here is as @andresgalante mentioned why .col is position relative.

0reactions

notaphplovercommented, May 25, 2018

@jackmu95 You are welcome. Yeah, it would be wonderful ^_^ 👍 .

Top Results From Across the Web

Bootstrap 5.1.3 Dropdown data-bs-boundary No Longer Works

The Dropdown is right justified on the page and due to this, dropdown items that are longer that the selected item are truncated...

Bootstrap 4 dropdown in scrollable column - CodePen

You can use the CSS from another Pen by using its URL and the proper URL extension.

Dropdowns · Bootstrap v5.2

Overview. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap ...

Angular directives for Bootstrap - AngularUI

AngularJS (Angular) native directives for Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required!

Overflowing content - Learn web development | MDN

The problem with data loss is that you might not notice. ... you could use the overflow-y property, setting overflow-y: scroll .