Geek Answers Handbook

Cut a cutout using twitter bootstrap with the possibility of overflow on the container

The Bootstrap popup window gets cropped, I looked at all the options mentioned in the following questions, but didn't work.

Disabling bootstrap

Click boot button bootstrap z-index dropdown

problem with z-index with twitter bootstrap popup menu

Requirements

  • I want to scroll in the main div
  • I want the bootstrap popup not to be cropped
  • Do not change the height of the width of the div and the drop-down menu.

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 a problem:

Current situation

What I need:

This is what I want

Thank you in advance

+5
source share
3 answers

Problem

I am using Bootstrap 3 and have the same problem with an auto overflow div container. It contains a drop-down menu that should pop out of the container.

Decision

The solution is to set the position: fixed in the drop-down list, and then calculate the coordinates using jQuery on click. Coordinates are calculated using offset (), so its relation to the document window instead of the parent elements.

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); });

Optionally add this to hide the drop-down menu when resizing the window:

 $( window ).resize(function() { $('.somecontainer .dropdown-menu').parent().removeClass('open'); });
+3
source

This actually has nothing to do with the drop down menu. CSS logic - you cannot have an absolute element, not trimmed, that is inside a div (overflow: auto) with a fixed height.

The solution will be a bit messy, but you will need to add a dropdown div outside your scroll container and align it with the trigger link.

0
source

hi, it was nice to give this answer because I tried to make an effort for this, therefore

bdw I agree with Chetan that you will need to make a dropdown div from the main div

although I know little about angular, so I can’t say what your limitations will be

although 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 trial version

note that : although one subtle one is that you need to specify the name of all divs dynamically if you include it in a dynamic environment.

and one more thing that I redefined the minimum bootstrap width dropmenu width 160 px to 142 px, which would be undesirable according to my suggestion also

0
source

More articles:


All Articles