角」自舉下拉按鈕大小

我有一些要求，迫使我的風格的角度引導下拉要像this：角」自舉下拉按鈕大小

一切正常，只是我需要按鈕的文本響應罰款。所以用戶在下拉列表中選擇的內容應該顯示在按鈕中。

正如你所看到的，我在右下角的下拉列表中有一個小三角形，當你選擇寬度較短的選項時，會導致問題。像下面

我的問題I，S是有什麼辦法可以解決這個問題？例如通過設置按鈕等於最大長度我有下拉列表中？或任何其他解決方案？

，你可以在這裏找到所有代碼：

http://plnkr.co/edit/zmDUjqdtPsql9GJjva4T?p=info

angular.module('ui.bootstrap.demo').directive('uibDropdownTemplate', ['$log', function ($log) { 
     return { 
      restrict: 'EA', 
      replace: true, 
      scope: { 
       defaultText: '@', 
       options: '=',    
       selectedOption: '=' 
      }, 
      templateUrl: 'drop-down.html', 
      controller: function() { 

      },    
      link: function (scope, element, attrs) { 

       if (scope.selectedOption === undefined) { 
        scope.selectedOption = scope.defaultText; 
       } 

       scope.selectedChange = function(option,$event){ 
        if(scope.selectedOption === option) { 
         scope.selectedOption = scope.defaultText       
         $($event.target).removeClass("option-selected"); 
        }    
        else 
        { 
         scope.selectedOption = option;  
         $("ul.dropdown-menu>li>a").removeClass("option-selected"); 
         $($event.target).addClass("option-selected"); 

        } 

       }; 
      } 
     }; 
    }]);

來源

2015-12-02 Am1rr3zA

你爲什麼不使用固定寬度？ – sani

另一種解決方案是在你的指令中獲取兩個寬度並將它們設置爲固定寬度 – sani

@sani我有2個固定寬度的問題，1-我不知道寬度，因爲我的下拉是一個指令，可以使用不同的時間不同的選項2-我認爲我不能設置角度引導按鈕的寬度 – Am1rr3zA

沒有用的字體和em和這樣的擺弄，我只能拿出一個快速和骯髒的解決方案在制定方面寬度。但是，一般概念是確定選項的最大長度，然後使用ng-class手動將preCaretText上的寬度設置爲所需的寬度。這是我的例子，我將它設置爲最大長度x 7像素，這在我的Chrome瀏覽器上看起來非常接近。

http://plnkr.co/edit/vK3DxLM7mNuKG0w2Q8jv?p=preview

落down.html

  <div class="preCaretText" ng-style="{'width': maxOptionLength * 7+ 'px'} ">{{selectedOption}}</div>

example.js

angular.module('ui.bootstrap.demo').directive('uibDropdownTemplate', ['$log', function ($log) { 
     return { 
      restrict: 'EA', 
      replace: true, 
      scope: { 
       defaultText: '@', 
       options: '=',    
       selectedOption: '=' 
      }, 
      templateUrl: 'drop-down.html', 
      controller: function() { 

      },    
      link: function (scope, element, attrs) { 
       var maxOptionLength = Math.max.apply(Math, scope.options.map(function (el) { return el.length })); 
       scope.maxOptionLength = maxOptionLength; 

       if (scope.selectedOption === undefined) { 
        scope.selectedOption = scope.defaultText; 
       } 

       scope.selectedChange = function(option,$event){ 
        if(scope.selectedOption === option) { 
         scope.selectedOption = scope.defaultText       
         $($event.target).removeClass("option-selected"); 
        }    
        else 
        { 
         scope.selectedOption = option;  
         $("ul.dropdown-menu>li>a").removeClass("option-selected"); 
         $($event.target).addClass("option-selected"); 

        } 

       }; 
      } 
     }; 
    }]);

來源

2015-12-02 20:56:54

如果你改變$ scope.items = [ 「AAAA」，「BBBB」，「CCCC」 ]。你的解決方案不能很好地工作 – Am1rr3zA

這是因爲引導程序的CSS具有160px的最小寬度應用於下拉菜單類。你可以用'ch'單位得到稍微更準確的結果（可能是0.85-0。9 x是ch中的最大寬度），但是如果您預計下拉量很小，則可能需要覆蓋引導程序樣式 –

是使用兩個您的按鈕btn-block和下拉不是一種選擇？這樣，他們倆把他們的父元素的大小：

<div> 
    <div class="btn-group btn-block" uib-dropdown > 
     <button type="button" class="btn drop btn-block" uib-dropdown-toggle> 
      <div class="preCaretDiv"> 
       <div class="preCaretText">{{selectedOption}} </div> 
       <div class="caretCircle"> 
        <span class="caret"></span> 
       </div> 
      </div> 
     </button> 
     <ul class="uib-dropdown-menu btn-block" role="menu" aria-labelledby="button-template-url">  
      <li role="menuitem" ng-repeat="option in options" ng-click="selectedChange(option,$event)"><a href="">{{option}}</a></li>   
     </ul> 
    </div> 
</div>

http://plnkr.co/edit/8IiSWese3fVtnG29MmFK?p=preview

來源

2015-12-02 21:32:52 iH8

角」自舉下拉按鈕大小

回答

相關問題