Question

我使用了Multiselect of Bootstrap。

我的问题是当我从选项中选择项目时。如果名称太长，那么按钮宽度也会增加。

enter image description here

选择选项后如何处理按钮宽度。

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

另一种解决方法是在＆＃34; buttonText＆＃34;函数在bootstrap-multiselect.js文件中，我们可以设置按钮文本长度，然后像这样返回：

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
    },

那样你会有

FINAL MULTIELECT

 $('#anyID').multiselect({      

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

Bootstrap Multiselect按钮宽度问题

4 个答案: