0
Ich habe ein Überbrückungsmenü. Ich muss seine Höhe auf maximal 500 px einstellen und einen Bildlauf setzen, wenn es den Wert überschreitet. Dies ist jedoch mit dem folgenden Code nicht möglich. Das sekundäre Fly-Menü erscheint einfach nicht. Bitte schlagen Sie Lösungen vor, um die Ergebnisse zu erzielen.Flyover-Liste mit vertikaler Bildlauf
<div class="outlet-account-list" id="outlet-filtering" ng-show="showOutletFlyer">
\t
\t <style type="text/css">
\t \t
\t \t /** Top Level Menu **/
\t \t \t #menuwrapper ul, #menuwrapper ul li{
\t \t \t margin:0;
\t \t \t padding:0;
\t \t \t list-style:none;
\t \t \t }
\t \t \t #menuwrapper ul{
\t \t \t \t padding: 5px 0;
\t \t \t background: #fff;
\t \t \t width:170px;
\t \t \t max-height: 500px;
\t \t \t }
\t \t \t #menuwrapper > ul {
\t \t \t \t margin-left: 8px;
\t \t \t \t overflow-x: visible; //Removing these two overflow rules will show up the list.
\t \t \t \t overflow-y: auto;
\t \t \t }
\t \t \t
\t \t \t #menuwrapper ul li{
\t \t \t width:100%;
\t \t \t cursor:pointer !important;
\t \t \t }
\t \t \t
\t \t \t #menuwrapper ul > li:hover{
\t \t \t background-color:#e9f3ff;
\t \t \t position:relative;
\t \t \t cursor:pointer !important;
\t \t \t }
\t \t \t
\t \t \t #menuwrapper ul li a{
\t \t \t padding:5px 10px;
\t \t \t padding-right: 5px;
\t \t \t color:#000;
\t \t \t display:inline-block;
\t \t \t text-decoration:none;
\t \t \t width: 100%;
\t \t \t \t cursor:pointer !important;
\t \t \t }
\t \t \t #menuwrapper ul li a span{
\t \t \t \t cursor:pointer !important;
\t \t \t }
\t \t \t /**** SECOND LEVEL MENU ****/
\t \t
\t \t \t #menuwrapper ul li ul{
\t \t \t position:absolute;
\t \t \t box-shadow: 0px 0px 1px 1px #ccc;
\t \t \t display:none;
\t \t \t }
\t \t \t
\t \t \t #menuwrapper ul li:hover ul{
\t \t \t left:166px;
\t \t \t top:0px;
\t \t \t display:block;
\t \t \t }
\t \t \t
\t \t \t #menuwrapper ul li:hover ul li:hover{
\t \t \t background-color:#e9f3ff;
\t \t \t }
\t \t \t #menuwrapper ul li ul li a{
\t \t \t color:#000;
\t \t \t display:inline-block;
\t \t \t width:120px;
\t \t \t }
\t \t \t #menuwrapper ul{
\t \t \t /*height: 500px;*/
\t \t \t /*overflow-y: auto;*/
\t \t \t /*overflow-x: hidden;*/
\t \t \t }
\t \t \t #menuwrapper ::-webkit-scrollbar {
\t \t \t width: 4px;
\t \t \t }
\t \t \t #menuwrapper ::-webkit-scrollbar-thumb {
\t \t \t background-color: #000;
\t \t \t -webkit-border-radius: 8px;
\t \t \t }
\t \t
\t </style>
\t
\t \t \t \t \t \t \t
\t <div id="menuwrapper" ng-if="(outlets.length > 1 || outlets[0].accountCommands.length > 1)" ng-click="preventClick($event)">
\t <ul>
\t <li ng-if="outlets.length > 1"><a ng-click="setOutletAcc('','')" class="text-capitalize">All Outlets</a></li>
\t <li ng-repeat="outlet in outlets" ng-click="(outlet.accountCommands.length == 1) && setOutletAcc(outlet.id,outlet.accountCommands[0].id)">
\t \t <a><span class="pull-left wrap_text130 text-capitalize">{{outlet.name}}</span>
\t \t \t <span class="icon-pagination-right pull-right marginTR5" ng-hide="outlet.accountCommands.length == 1"></span>
\t \t </a>
\t <ul ng-hide="outlet.accountCommands.length == 1">
\t <li ng-if="outlet.accountCommands.length>1"><a ng-click="setOutletAcc(outlet.id, '')" class="text-capitalize">All Accounts</a></li>
\t <li ng-repeat="acc in outlet.accountCommands"><a ng-click="setOutletAcc(outlet.id, acc.id)" class="text-capitalize">{{acc.accountName}}</a></li>
\t </ul>
\t </li>
\t
\t
\t </ul>
\t </div>
</div>
Die Schriftrolle auf beiden Listen werden muss. Wird es funktionieren ? – kushalvm
Die zweite Liste ist sicher kein Problem, eine Rolle hinzuzufügen, aber zuerst ist. – kushalvm
für die erste Liste ist auch kein Problem. Scroll wird auch zuerst kommen. aber diese Zeit wird nicht richtig kommen. Sie sollten jQuery für diese verwenden –