2015-12-02 86 views
1

我有一些要求,迫使我的风格的角度引导下拉要像thisenter image description here角”自举下拉按钮大小

一切正常,只是我需要按钮的文本响应罚款。所以用户在下拉列表中选择的内容应该显示在按钮中。

正如你所看到的,我在右下角的下拉列表中有一个小三角形,当你选择宽度较短的选项时,会导致问题。像下面

enter image description here

我的问题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"); 

        } 

       }; 
      } 
     }; 
    }]); 
+0

你为什么不使用固定宽度? – sani

+0

另一种解决方案是在你的指令中获取两个宽度并将它们设置为固定宽度 – sani

+0

@sani我有2个固定宽度的问题,1-我不知道宽度,因为我的下拉是一个指令,可以使用不同的时间不同的选项2-我认为我不能设置角度引导按钮的宽度 – Am1rr3zA

回答

1

没有用的字体和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"); 

        } 

       }; 
      } 
     }; 
    }]); 
+0

如果你改变$ scope.items = [ “AAAA”, “BBBB”, “CCCC” ]。你的解决方案不能很好地工作 – Am1rr3zA

+0

这是因为引导程序的CSS具有160px的最小宽度应用于下拉菜单类。你可以用'ch'单位得到稍微更准确的结果(可能是0.85-0。9 x是ch中的最大宽度),但是如果您预计下拉量很小,则可能需要覆盖引导程序样式 –

0

是使用两个您的按钮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