Angular'Bootstrap下拉按钮大小

Question

I have some requirements that force me to style angular bootstrap drop-down to be like this :

Everything works fine except that I need to make the button's text responsive. so what ever user pick in drop-down list should be shown in button.

As you can see I have small triangle on right upper side of drop-down list and when you choose some option with shorter width it will cause problem. like below

My question i,s is there any way I can fix this issue? for example by setting with of button equal to maxim length I have in drop-down list? or any other solution?

you can find all the code here:

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

                    }

                };
            }
        };
    }]);

Answer 1

Without fiddling with fonts and em and such, I could only come up with a quick-and-dirty solution in terms of setting the width. The general concept, however, is to determine the max length of your options and then use ng-class to manually set the width on your preCaretText to the desired width. It my example, I set it to the max length x 7 px, which seems pretty close on my Chrome browser.

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

drop-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");

                    }

                };
            }
        };
    }]);

Answer 2

Is using a btn-block on both your button and dropdown not an option? That way they'll both take the size of their parent element:

<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