Bootstrap Multiselect按鈕寬度問題

Question

我使用了Multiselect of Bootstrap。

我的問題是當我從選項中選擇項目時。 如果名稱太長，則按鈕寬度也會增加。

選擇選項后如何處理按鈕寬度。

Answer 1

嘗試使用以下代碼。

您可以在css中設置max-width。

使用Javascript：

 $('#yourXYZID').multiselect({
    buttonText: function(options) 
    {
        var retStr = "";
        if (options.length === 0) {
           retStr = "None selected";
        } else if(options.length <=3){
           var textArray = [];
           $.each(options,function(key,value){
               textArray.push($.trim($(value).html()));
           });
           retStr = "<div class='pull-left restricted'>"+textArray.join(",")+"</div>";
        } else {
           retStr = options.length+" selected";
        }
        return retStr+" <b class='caret'></b>";
    }
 });

CSS：

.multiselect.dropdown-toggle.btn.btn-default > div.restricted {
    margin-right: 5px;
    max-width: 100px;
    overflow: hidden;
}

Answer 2

另一個解決方法是在bootstrap-multiselect.js文件中的“buttonText”函數中，我們可以設置按鈕文本長度，然后像這樣返回：

if(selected.length>20){ 
   return selected.substr(0, 20); //if the text is too long, then this if statement will be executed
 }
else{
   return selected.substr(0, selected.length - this.delimiterText.length);
 }

/*Bootstrap adds extra characters for the selected option.For example: the length of the option 'peter' will actually be 14 because of the delimiter and extra spaces. So you may want to set a bigger number in the if statement*/

注意：在實際代碼中，return語句如下所示：

return selected.substr(0, selected.length - this.delimiterText.length);

Answer 3

.multiselect為您提供了一個名為buttonWidth的參數。 當沒有選擇任何東西時，這將保持寬度更寬。 你也可以把％放在那里。 您可以像這樣設置寬度：

<script type="text/javascript">
    $(document).ready(function() {
        $('#yourcontrol').multiselect({
            buttonWidth: '100px'
        });
        //caret is in the middle, switch it to right
        $(".caret").css('float', 'right');
        $(".caret").css('margin', '8px 0');
    });
</script>

Answer 4

我遇到了同樣的問題，我相信它的解決方式更快。 所以你有這樣的多選實例化：

$('#anyID').multiselect({       

然后是一些屬性

maxHeight:'300px'

好吧，如果你想在某個事件上改變按鈕寬度。 做這個：

buttonWidth:function(){             
     if(something happens) 
                    return '300px';  //  value chosen randomly
                else
                    return "150px";  //  value chosen randomly
    },

那樣你會有

最終的多重選擇

 $('#anyID').multiselect({      

    maxHeight:'300px',
    buttonWidth:function(){             
     if(something happens) 
                    return '300px';  //  value chosen randomly
                else
                    return "150px";  //  value chosen randomly
    },
 )};