To ensure the dropdown is displayed correctly, adjust the div property to overflow:visible;, or apply Position:absolute; to the .dropdown class like below:

.bs-example .dropdown{position:absolute;}

For a live demonstration, refer to the following Working Code: http://jsfiddle.net/guruWork/3x1f8ng5/

In my case, I found a solution by utilizing static positioning for the dropdown element. I placed the dropdown within a bootstrap table and applied overflow hidden to it.

<div class="table" style="overflow: hidden;">
  <div class="dropdown" style="position: static;">
    <div class="dropdown-menu">...</div>
  </div>
</div>

Interestingly, this approach did not work with your fiddle. It's possible that the use of bootstrap tables could be affecting the outcome. Nonetheless, it might offer a fresh perspective for others to experiment with.

Utilizing Bootstrap 5.2.1, we have the ability to set up popperjs with a fixed position that extends beyond the parent's overflow: hiddden.

<div style="overflow: hidden">
  <div class="dropdown">
    <button class="dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            data-bs-popper-config='{"strategy":"fixed"}'>
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f637f60">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d213d22">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-6">
    <div style="overflow: hidden; width: 100px; height: 35px; border: 1px solid pink;">
      <div class="dropdown">
        <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
      Working
    </button>
        <ul class="dropdown-menu">
          <li>Item #1</li>
          <li>Item #2</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-6">
    <div style="overflow: hidden; width: 100px; height: 35px; border: 1px solid pink;">
      <div class="dropdown">
        <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
      Cut off
    </button>
        <ul class="dropdown-menu">
          <li>Item #1</li>
          <li>Item #2</li>
        </ul>
      </div>
    </div>
  </div>

Update

In addition, as per the information in the Bootstrap 5.2.1 Docs, the popperConfig can also be initialized via JS.

const element = document.querySelector(".dropdown-toggle")
const dropdown = bootstrap.Dropdown.getOrCreateInstance(element, {
  popperConfig: {
    strategy: "fixed"
  }
)

Solution for Ng Bootstrap >= 4.1.0 (Angular powered Bootstrap):

If you are facing the same issue and using ng-bootstrap, here is a helpful solution - simply add the container="body" option in your ngbDropdown:

<div ngbDropdown container="body">
    <!-- Include your dropdown menu content here -->
</div>

Despite trying multiple other solutions with no success, I came up with a different workaround:

$('.dropdown').on('shown.bs.dropdown', function () {
    const dropdown = $(this);
    setTimeout(function () {
        dropdown.find('.dropdown-menu').css({'top': dropdown.offset().top - $(window).scrollTop(), 'left': dropdown.offset().left - $(window).scrollLeft(), 'position': 'fixed'});
    }, 1);
});

It is crucial to have the timeout in place since the event handler triggers before Bootstrap applies the CSS styling to the dropdown, causing an overwrite.

Give this a shot as well, just swap out yourDivId with the actual id of your specific div.

$('.dropdown').on('show.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'visible');
});

$('.dropdown').on('hidden.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'hidden');
});

I encountered a scrolling issue with many of the solutions provided in this and other similar questions on Stack Overflow. What ultimately resolved the problem for me was adjusting the dropdown position to inherit:

.dropdown {
  position: inherit;
}

Subsequently, I utilized JavaScript to set the position of the dropdown-menu:

$(document).on("show.bs.dropdown", function () {
  var dropdownToggle = $(this).find(".dropdown-toggle");
  var dropdownMenu = $(this).find(".dropdown-menu");
  dropdownMenu.css({
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
    "left": dropdownToggle.position().left + "px"
  });
});

For a demonstration, refer to this live example: http://jsfiddle.net/ck66ee9q/

After spending hours scouring the web for a solution, I found myself in the same predicament. Ultimately, I decided to implement an event handler that would capture the dropdown-toggle action and dynamically adjust its position to prevent it from being cut off.

If you're experiencing a similar issue, feel free to give my code snippet a try:

$('.dropdown-toggle').click(function (){
     dropDownFixPosition($('button'),$('.dropdown-menu'));
 });
 function dropDownFixPosition(button,dropdown){
    var dropDownTop = button.offset().top + button.outerHeight();
    dropdown.css('top', dropDownTop + "px");
    dropdown.css('left', button.offset().left + "px");
  }

Within a div container styled with Bootstrap's panel class, I had several DevExpress ComboBoxes inside div elements using Bootstrap's col-lg classes.

An issue arose where the background or border color of the panel would bleed into the div above it. To address this, I applied overflow:hidden; to the panel, but that caused the ComboBox dropdowns to be cutoff. By adding style="position: inherit" to the specific div elements within the panel housing the ComboBoxes, the problem was resolved.

<div class="col-sm-12" style="position: inherit">
<div class="col-sm-4" style="position: inherit">
 <dx:aspxComboBox></dx:aspxComboBox>
</div>
</div>

I discovered this solution here.

After struggling to get any of the suggested solutions to work properly, I decided to create my own based on a combination of different suggestions. And I must say, this custom solution works like a charm!

In order to differentiate it from regular dropdown elements, I introduced a new class here that gives it a unique appearance and functionality.

$(document).on("show.bs.dropdown", ".dropdown.my-body-dropdown", function () {

    // Grabbing the original dropdown element
    var thisDropdown = $(this);

    // Creating a deep clone of the element
    var thisDropdownCopy = thisDropdown.clone(true, true);

    // Appending the cloned element to the body with a modified class 'my-modified-dropdown' 
    // and showing it by adding the 'open' class
    $("body").append( thisDropdownCopy.addClass("my-modified-dropdown open").css({ "position": "absolute", "left": thisDropdown.offset().left, "top": thisDropdown.offset().top }).detach() );

    // Hiding the original dropdown element
    $(this).hide();

})
.on("hidden.bs.dropdown", ".dropdown.my-body-dropdown", function() {

    // Removing the modified dropdowns
    $(".dropdown.my-body-dropdown.my-modified-dropdown").remove();

    // Showing the original dropdowns again
    $(".dropdown.my-body-dropdown").show();

});

To customize bootstrap 5.3, simply include the following code snippet:

bootstrap.Dropdown.Default.popperConfig = { strategy:"fixed" };

After some consideration, I opted for tippy.js instead of the bootstrap dropdown. This choice successfully resolved the issue with the overflow:hidden parent, as tippy.js allows the dropdown to be positioned in the body tag.

Thanks to everyone who assisted me in finding a solution to my problem. The accepted answer didn't work for me because my dropdowns were generated in the code-behind during an ajax call as GenericHtmlControls, which means they don't exist on page load to be targeted with the .dropdown selector. To address this issue, I assigned a unique css class (editModeModuleMenu) to the affected div(s) that house the menu and had previously been marked with .dropdown-menu. I then adjusted the event selector to target the window and restricted the function to only modify the currently selected dropdown.

$(window).on('show.bs.dropdown', function (e) {
var el = $(e.target).closest('.editModeModuleMenu');
if (el.length == 0) return;
$('body').append(el.css({
    position: 'absolute',
    left: el.offset().left,
    top: el.offset().top
}).detach());})

Additionally, here is the relevant snippet of code-behind:

private void attachSettingGear(Panel container)
    {
        // Code here...
    }

private void createMenuLink(HtmlGenericControl menu, string text, string icon, string href)
    {
        // Code here...
    }

I appreciate all the valuable input provided by the community. Hopefully, my solution can benefit others facing similar challenges.

2022 Bootstrap 5 example showcasing functionality.

The following code seems to be the appropriate solution:

    $('.dropdown > button').off('click').click(function(clickEvent){
        clickEvent.preventDefault();
        clickEvent.stopPropagation();
    });
    $('.dropdown').on('show.bs.dropdown', function() {
        $('body').append($('.dropdown').css({
            position: 'absolute',
            left: $(this).offset().left,
            top: $(this).offset().top
        }).detach());
    });
    $('.dropdown').on('hidden.bs.dropdown', function() {
        $('.dropdown-wrap').append($(this).css({
            position: 'relative',
            left: '0',
            top: '0'
        }).detach());
    });

After spending several hours and trying different methods, I finally discovered the correct implementation for Bootstrap 5:

const dropdowns = document.querySelectorAll('.dropdown-toggle')
const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
    popperConfig(defaultBsPopperConfig) {
        return { ...defaultBsPopperConfig, strategy: 'fixed' };
    }
}));

If you're not concerned about the height of the table, you can adjust the min-height when the dropdown is shown and then revert it back to auto once the dropdown is hidden:

$(".table-functions").on('show.bs.dropdown', function() {
  $('.table-scroll').css("min-height", "125px");
}).on('hide.bs.dropdown', function() {
  $('.table-scroll').css("min-height", "auto");
});

One can easily tackle this issue with Bootstrap's built-in functionality, eliminating the need for any custom javascript or css overrides.

To address this specific concern, check out the boundary option available at https://getbootstrap.com/docs/4.0/components/dropdowns/#options

In my experience, setting it to either viewport or window successfully resolved the problem I encountered.

I was in need of a solution for creating a horizontal scrollable navbar with dropdowns. The code snippet below addresses this specific requirement, but it can also be adapted for use in other scenarios.

function bringToFront(dropdown) {
    setTimeout(
        function () {dropdown.find('.dropdown-menu').css({ 'top': dropdown.offset().top + dropdown.outerHeight() - $(window).scrollTop(), 'left': dropdown.offset().left - $(window).scrollLeft(), 'position': 'fixed' })
    }, 1)
}

$('.navbar .dropdown').on('shown.bs.dropdown', function () { bringToFront($(this)); });