Uchwyt upuszczenia paska startowego twitter upuszczony problem z przelewem auto na pojemniku

Rozwijanie listy startowej jest przycinane, sprawdziłem opcję wymienioną w poniższych pytaniach, ale nie zadziałało.Uchwyt upuszczenia paska startowego twitter upuszczony problem z przelewem auto na pojemniku

Wymagania

chcę, przewijanie w głównym div
Chcę bootstrap rozwijana aby nie obcięty
Wysokość szerokość div rozwijanej i nie powinny być zmieniane

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

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <title>Clipping problem</title> 
 
     <link data-require="[email protected]*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /> 
 
     <link data-require="[email protected]*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
     <script data-require="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
     <script data-require="[email protected]*" 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>

z problemem:

Czego chcę:

góry dzięki

Źródło

2015-09-03 Trans

W swojej Plunkr, można byłaby to użycie arkusza stylów raczej niż style śródliniowe? Byłoby łatwiej debugować w ten sposób. – jmargolisvt

@Trans trzeba zobaczyć całe zdanie, aby zobaczyć.? ponieważ jeśli chcesz, to jak byś sobie poradził, nie chcesz łamać zdania, a nie chcesz robić przepełnienia w kierunku X, a także –

@Trans, więc jaki jest twój oczekiwany wynik.? czy możesz to bardziej wyjaśnić.? –

Właściwie to nie ma nic wspólnego z listy rozwijanej. Logika CSS - nie można przyciąć elementu bezwzględnego, który znajduje się wewnątrz elementu div (overflow: auto) ze stałą wysokością.

Rozwiązanie byłoby nieco niechlujne, ale trzeba będzie uzupełnić element div poza przewijany kontener i wyrównać go do łącza wyzwalacza.

Źródło

2015-09-04 05:10:59 Chetan

Zgoda, teraz pytanie brzmi: jak to zrobić? – Trans

hi to był miły, aby dać tę odpowiedź, ponieważ starał się dać starań do tego tak

BDW zgadzam się z Chetan że trzeba by zrobić div rozwijaną z głównego div

choć don „t wiedzieć dużo o kątowej, więc nie mogę powiedzieć, co byłoby twoje ograniczenia

chociaż udało mi się pracować w drodze

<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

nuta że: chociaż jeden cienki jest że musisz dynamicznie nadać tytułowi div , jeśli uwzględnisz to w środowisku dynamicznym.

a co innego i nadpisane MIN szerokość bootstrap dropmenu za szerokości 160 px na 142 px, która byłaby nie korzystna jak na moją sugestią także

Źródło

2015-09-04 05:34:29

@ Transfery sprawdź odpowiedź –

http://plnkr.co/edit/LozznMrhLobJ3PE3dtQ9?p=preview nie działa zgodnie z oczekiwaniami. – Trans

@Trans Więc co, s twoja potrzeba.? lub oczekiwany wynik.>? –

Problem

używam Bootstrap 3 i miał ten sam problem z kontenerem div z automatycznym przelewem. Zawiera listę rozwijaną, która musi wyskoczyć z kontenera.

Rozwiązanie

Rozwiązaniem jest ustawienie pozycji: przymocowany do listy rozwijanej, a następnie obliczyć współrzędne z jQuery na kliknięcia. Współrzędne obliczane są za pomocą funkcji offset(), czyli względem okna dokumentu, a nie elementów nadrzędnych.

To rozwiązanie prawdopodobnie działa również w przypadku przelewu: ukryte pojemniki.

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

Rozszerzone wersje dodać to, aby ukryć listę rozwijaną na okno zmiany rozmiaru:

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

Źródło

2015-12-22 10:42:20 Turbojohan

Mogę potwierdzić, że działa to w przypadku przepełnienia: ukryte pojemniki. W rzeczywistości jest to jedyne rozwiązanie, które zadziałało dla mnie – justkt

Uchwyt upuszczenia paska startowego twitter upuszczony problem z przelewem auto na pojemniku

Odpowiedz

Powiązane problemy