Twitter Bootstrap Question posted in

Handle twitter bootstrap dropdown clipped issue having overflow auto on container

Bootstrap dropdown is getting clipped, i looked at all option mentioned in following questions but did not work.

Bootstrap drop down cutting off

Twitter Bootstrap Button dropdown z-index layering issue

z-index issue with twitter bootstrap dropdown menu

Requirements

  • I want scrolling in main div
  • I want bootstrap dropdown to not get clipped
  • Height width of the div and dropdown should not be changed

Plunker:
http://plnkr.co/edit/HOKKYJ?p=preview

<!DOCTYPE html>
<html>

  <head>
    <title>Clipping problem</title>
        <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
        <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <script>
            angular.module("myApp", []).controller("MainCtrl", function($scope) {
            });
        </script>
  </head>

 <body style="height:100%;" ng-app="myApp">
        <div style="background: indianred; position: relative; left:40%; height: 200px; width: 250px; overflow-y: auto;">
                <div ng-repeat="num in [1,2,3,4,5]">
                    <div style="background: bisque; margin:5px; height: 50px;">
                        <div style="position: relative; float: right">
                            <button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
                            <div class="dropdown-menu">
                                <div style="text-wrap: none; white-space: nowrap;">I am a text......................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">I am a also text.................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">Another text........................................................................................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">One more text.............................!!</div>
                                <div style="text-wrap: none;white-space: nowrap;">Aha one more text...........................................................................!!</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </body>

</html>

With problem:

Current situation

What do i want:

This is what i want

Thanks in advance

Tags:

3

Answers


  1. 0

    Actually this has nothing to do with dropdown.
    CSS logic – you cannot have absolute element not cropped which is inside the div(overflow:auto) with fixed height.

    The solution would be bit messy, but you will need have append the dropdown div outside your scrolling container and align it to the trigger link.

    Login or Signup to reply.
  2. 0

    hi it’s been nice to give this answer because tried to give efforts for this so

    bdw i agree with Chetan that you would need to make the dropdown div out of the main div

    though i don’t know much about the angular so i can’t say what would be your limitations

    though i managed to work in my way 

     <body style="height:100%;" ng-app="myApp">
        <div class="main-div">
                <div ng-repeat="num in [1,2,3,4,5]">
                    <div class="repeated-div">
                        <div class="grouped-dd">
                            <button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
                            <div class="dropdown-menu temp">
                                <div class='no-wrap-text-div' title="I am a text......................................!!">I am a text......................................!!</div>
                                <div class='no-wrap-text-div' title="I am a also text.................................!!" >I am a also text.................................!!</div>
                                <div class='no-wrap-text-div' title="Another text........................................................................................!!">Another text........................................................................................!!</div>
                                <div class='no-wrap-text-div' title="One more text.............................!!">One more text.............................!!</div>
                                <div class='no-wrap-text-div' title="Aha one more text...........................................................................!!">Aha one more text...........................................................................!!</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </body>

    CSS

     .temp {
            max-width: 43px;
            min-width: 142px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .no-wrap-text-div{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 160px;
        }

    my tried Demo

    note that : though one thin is that you need to give the title’s of all div
    dynamically if you will include in dynamical environment so.

    and another thing i overridden the min-width of the bootstrap
    dropmenu’s width 160 px to 142 px that would be not preferable as per
    my suggestion also

    Login or Signup to reply.
  3. 0

    Problem

    I use Bootstrap 3 and had the same problem with a div container with overflow auto. It contains a dropdown that must pop out from the container.

    Solution

    The solution is to set position:fixed to the dropdown and then calculate coordinates with jQuery on click. Coordinates is calculated with offset() so its relative to document window instead of elements parent.

    This solution probably also works for overflow:hidden containers.

    CSS

    .somecontainer .dropdown-menu {
    position:fixed;
}

    jQuery

    $(".somecontainer .dropdown").on('click', function() {
    $(this).find('.dropdown-menu').css('top',$(this).offset().top);
    $(this).find('.dropdown-menu').css('left',$(this).offset().left);
});

    Optionaly add this to hide dropdown on window resize:

    $( window ).resize(function() {         
    $('.somecontainer .dropdown-menu').parent().removeClass('open');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search